React Native ios选择器始终打开

Question

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

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

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

Answer 1

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

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

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

Answer 2

这就是iOS UIPickerView组件的工作原理 - 没有办法自定义它.

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

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

使用这些和类似的关键字搜索,也会产生许多其他库.

Answer 3

我不知道您为什么选择 ActionSheet 作为已接受的答案。不过我会针对这个问题给出一个解决方法：

将此值放在您的状态中：

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

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

{this.checkIfIOS()}
      <Picker
         selectedValue={this.state.selected}
         style={{ height: 50, alignSelf: 'center', opacity: this.state.pickerOpacity, marginBottom:30, width: 250}}
         onValueChange={(itemValue, itemIndex) =>{
            this.setState({
                selected: itemValue,
                label: itemValue
            });
            toggle();
            }
          }>
          <Picker.Item label="Your Label" value="yourValue"/>
      </Picker>

所以现在我们要检查一下，我们的客户端是 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 (<Button buttonStyle={{backgroundColor:'#D1D1D1', opacity: this.state.opacityOfOtherItems}} onPress={this.toggle()} color="#101010" title={this.state.label} onPress={this.changeOpacity}/>); 
        }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
             });
          }
     }
}

编辑： iOS 截图（点击此处观看视频）

Answer 4

使用

<Picker itemStyle={{height:50}} > </Picker>

它只影响 ios 选择器。将选择器项目样式高度更改为您的标准。

Answer 5

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