web-dev-qa-db-fra.com

React Le sélecteur ios natif est toujours ouvert

J'ai deux sélecteurs sur mon écran. Chaque fois que je navigue vers l'écran dans l'application iOS, je constate que les sélecteurs sont toujours ouverts et que toutes les options sont visibles.

enter image description here

Cela fonctionne parfaitement bien dans Android où les options ne sont visibles qu'après avoir cliqué sur le sélecteur.

Quelqu'un peut-il suggérer une solution pour résoudre ce problème dans iOS?

iosreact-nativepicker
22
Abhishek Nalin

Utilisez ActionSheet au lieu de Picker sur iOS. https://facebook.github.io/react-native/docs/actionsheetios.html

Comme l'a répondu jevakallio, c'est le comportement par défaut sur iOS. Mais cela ne donne pas une bonne UX, donc supprimez tous les composants du sélecteur et remplacez-les par ActionSheet.

Je l'ai fait et cela fonctionne très bien. La raison pour laquelle j'ai préféré ActionSheet aux autres composants suggérés par jevakallio car il est développé par l'équipe RN et a un bon feeling natif. La dernière option suggérée react-native-modal-picker est également très bonne.

enter image description here

14
Abhishek Nalin

Voilà comment fonctionne le composant iOS UIPickerView - il n'y a aucun moyen de le personnaliser.

Si vous voulez un autre type d'élément d'interface utilisateur, vous devrez écrire le vôtre, ou utiliser l'une des nombreuses bibliothèques open source, telles que:

La recherche sur ces derniers et sur des mots-clés similaires donne également de nombreuses autres bibliothèques.

11
jevakallio

React-native-modal-picker a été arrêté. sélecteur de mode natif réactif

6
Luan Felipe Costa

Je ne sais pas pourquoi vous choisiriez la réponse avec ActionSheet comme réponse acceptée. Cependant, je vais donner une solution de contournement pour ce problème:

Mettez ces valeurs dans votre état:

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

Dans votre méthode de rendu, procédez comme suit:

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

Alors maintenant, nous devons vérifier si notre client est Android ou ios. Par conséquent, importez Platform et mettez la méthode checkIfIos () - dans votre 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
             });
          }
     }
}
1
Sercan Samet Savran