Réagir Natif ios sélecteur est toujours ouverte

J'ai deux sélecteurs sur mon écran. Chaque fois que je navigue à l'écran dans l'application iOS je trouve que les vendangeurs sont toujours ouvert et que toutes les options sont visibles.

Réagir Natif ios sélecteur est toujours ouverte

Il fonctionne parfaitement bien sous Android où les options sont visibles qu'au bout de nous-cliquez sur le sélecteur.

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

OriginalL'auteur Abhishek Nalin | 2016-12-16

  1. 13

    Utilisation ActionSheet au lieu de Sélecteur sur iOS.
    https://facebook.github.io/react-native/docs/actionsheetios.html

    Comme répondu par jevakallio c'est le comportement par défaut sur iOS. Mais cela ne donne pas une bonne expérience utilisateur, afin de supprimer toutes sélecteur de composants et de les remplacer par ActionSheet.

    Je l'ai fait et il fonctionne très bien. La raison, j'ai préféré ActionSheet sur les autres composants suggéré par jevakallio parce qu'il est développé par la RN de l'équipe et a un bon natif du sentiment. La dernière option proposée réagir-native-modal-sélecteur est également très bon.

    Réagir Natif ios sélecteur est toujours ouverte

    ActionSheet ne devraient pas être réservés à des actions?

    OriginalL'auteur Abhishek Nalin

  2. 8

    C'est juste la façon dont le iOS UIPickerView composant agit - il n'y a aucun moyen de le personnaliser.

    Si vous souhaitez un autre type d'élément d'INTERFACE utilisateur, vous devez écrire votre propre, ou utiliser l'une des nombreuses bibliothèques open source, tels que:

    Une recherche sur google avec ces, et des mots clés similaires, les rendements de nombreuses autres bibliothèques.

    OriginalL'auteur jevakallio

  3. 6

    Réagir-native-modal-sélecteur a été abandonnée.
    réagir-native-modal-sélecteur

    OriginalL'auteur Luan Felipe Costa

  4. 1

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

    Mettre 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 render n'suivantes:

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

    Nous avons maintenant à vérifier, si notre client est android ou ios. Par conséquent, l'importation de la Plateforme et de mettre le checkIfIos()-Méthode 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
             });
          }
     }
}
    ne vous ont peut-être une expo collation? Je vais avoir un moment difficile la mise en œuvre de ce et je ne suis même pas sûr si cela fonctionne.
    Malheureusement pas. Vous avez juste à mettre le toggle() & checkIfIOS() les méthodes et exécuter le checkIfOs avant le rendu de votre sélecteur et l'utilisation de la bascule() dans votre cueilleurs onValueChange événement. Si vous pouviez donner votre avis, peut vous aider à la façon de la mettre en œuvre.
    pouvez vous s'il vous plaît fournir des captures d'écran du sélecteur? Comment ne ressemble le bouton dans la vue? Il semble que la mise en œuvre de cette.changeOpacity() est manquant

    OriginalL'auteur Sercan Samet Savran