React Native ios选择器始终打开

我的屏幕上有两个选择器。 每当我在iOS应用程序中导航到屏幕时,我发现拾取器始终处于打开状态,所有选项都可见。

在此处输入图像描述

它在Android中完美运行,只有在我们点击选择器后才能看到选项。

有人可以建议一个解决方案来解决这个问题吗?

在iOS上使用ActionSheet而不是Picker。 https://facebook.github.io/react-native/docs/actionsheetios.html

正如jevakallio所回答的,这是iOS上的默认行为。 但这并没有提供良好的用户体验,因此删除所有选择器组件并替换为ActionSheet。

我做了,效果很好。 之所以我更喜欢ActionSheet而不是jevakallio建议的其他组件,因为它是由RN团队开发的,具有良好的本土感觉。 最后一个选项建议react-native-modal-picker也非常好。

在此处输入图像描述

这就是iOS UIPickerView组件的工作原理 – 无法自定义它。

如果您需要不同类型的UI元素,则需要编写自己的UI元素,或者使用众多开源库中的一个,例如:

  • 反应天然-下拉
  • 反应天然模态-下拉
  • 反应天然模态选取器

谷歌搜索这些和类似的关键字,也产生了许多其他库。

React-native-modal-picker已停产。 反应天然模态选择器

我不知道你为什么选择ActionSheet作为公认答案的答案。 但是,我将为此问题提供解决方法:

将此值置于您的状态:

 this.state= { pickerOpacity: 0, opacityOfOtherItems: 1 //THIS IS THE OPACITY OF ALL OTHER ITEMS, WHICH COLLIDES WITH YOUR PICKER. label: 'Firstvalue' } 

在您的渲染方法中执行以下操作

 {this.checkIfIOS()} { this.setState({ selected: itemValue, label: itemValue }); toggle(); } }>   

所以现在我们要检查一下,我们的客户端是android还是ios。 因此导入Platform并将checkIfIos() – Method放入代码中:

 import {Platform} from 'react-native' checkIfIOS(){ if(Platform.OS === 'ios'){ // check if ios console.log("IOS!!!"); //this button will (onpress) set our picker visible return (); }else if(Platform.OS === 'android'){ //check if android this.setState({ pickerOpacity: 1 //set picker opacity:1 -> picker is visible. }); console.log("ANDROID!!!"); } } toggle(){ if(Platform.OS === 'ios'){ if(this.state.pickerOpacity == 0){ this.setState({ pickerOpacity: 1, opacityOfOtherItems: 0 // THIS WILL HIDE YOUR BUTTON! }); }else{ this.setState({ pickerOpacity: 0, opacityOfOtherItems: 1 }); } } }