question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Picker doesn't pop up from bottom when used in React Native

See original GitHub issue

本地环境

  • antd-mobile 版本:0.9.14
  • 浏览器 (或标明是 react-native) 及其版本:react-native
  • 运行环境及其版本:ios

你做了什么?

I first defined an array of data:

const testData = [
    {value: 1, label: '1'},
    {value: 2, label: '2'},
    {value: 3, label: '3'},
]; 

Then I included the Picker component in the render method:

<Picker
    data={testData}
    values={[1]}
    cols={1}>
    <List.Item arrow="horizontal">Option</List.Item>
</Picker>

你期待的结果是:

The Picker would pop up from the bottom of the screen when I press the ‘Option’ field.

实际上的结果:

The Picker didn’t show up. Actually, nothing happened, not even a warning.

Interestingly, though, when I put the DatePicker component in the render method simply like this:

<DatePicker>
    <List.Item>Pick a Date</List.Item>
</DatePicker>

The DatePicker did pop up from the bottom when pressed.

Not sure if I used the component correctly.

可重现的在线演示

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
silentcloudcommented, Feb 7, 2017

@subject17 add prop triggerType="onClick"

<Picker data={testData} values={[1]} cols={1} triggerType="onClick">
     <List.Item arrow="horizontal">Option</List.Item>
</Picker>
0reactions
zhonggedancommented, Feb 18, 2017

我踩到这个坑了

Read more comments on GitHub >

github_iconTop Results From Across the Web

Ant Design Mobile Picker doesn't pop up from bottom when ...
I was testing the Picker component from Ant Design Mobile with React Native. But the Picker doesn't pop up from the bottom of...
Read more >
Accessibility - React Native
Create mobile apps accessible to assistive technology with React Native's suite of APIs designed to work with Android and iOS.
Read more >
To Pick the Date using Native Calendar - About React
–save is optional, It updates the react-native-datepicker dependency in your package.json file. Code for React Native Date Picker. Now Open App.js in any...
Read more >
Stacking overlapping views with zIndex in Expo and React ...
Along with specifying how the component will stack, you can break out of the default layout set by the component's parent by changing...
Read more >
react-native-calendar-picker - npm
Calendar Picker Component for React Native. Latest version: 7.1.3, last published: a month ago. Start using react-native-calendar-picker in ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found