React Native ios picker is always open

I have two pickers on my screen. Whenever I navigate to the screen in iOS app I find that the pickers are always open and all options are visible.

It works perfectly fine in Android where the options are visible only after we click on the picker.

Can somebody suggest a solution to fix this in iOS?

Use ActionSheet instead of Picker on iOS. https://facebook.github.io/react-native/docs/actionsheetios.html

As answered by jevakallio this is the default behaviour on iOS. But this doesn't give a good UX so remove all picker components and replace with ActionSheet.

I did and it works great. The reason I prefered ActionSheet over other components suggested by jevakallio because it is developed by the RN team and has a good native feeling. The last option suggested react-native-modal-picker is also very good.

That's just how the iOS UIPickerView component works - there's no way to customize it.

If you want a different kind of UI element, you'll need to write your own, or use one of the many open source libraries, such as:

Googling with these, and similar keywords, yields many other libraries as well.

React-native-modal-picker was discontinued. react-native-modal-selector

I don't know why you'd choose the answer with ActionSheet as accepted answer. However I'll give a workaround for this problem:

Put this values in your state:

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

In your render method do following:

{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>

So now we've to check, whether our client is android or ios. Therefore import Platform and put the checkIfIos()-Method in your code:

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

来源：https://stackoverflow.com/questions/41181683/react-native-ios-picker-is-always-open

标签

ios

react-native

picker