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 }); } } }