Tengo dos selectores en mi pantalla. Cada vez que me vaya a la pantalla en la aplicación de iOS me parece que los recolectores están siempre abiertas y todas las opciones son visibles.

Reaccionar Nativas de ios selector está siempre abierta

Funciona perfectamente bien en Android, donde las opciones son visibles sólo después de que haga clic en el selector.

Puede alguien sugerir una solución para solucionar este problema en iOS?

OriginalEl autor Abhishek Nalin | 2016-12-16

4 Comentarios

  1. 12

    Uso ActionSheet en lugar de Selector en iOS.
    https://facebook.github.io/react-native/docs/actionsheetios.html

    Como contestada por jevakallio este es el comportamiento por defecto en iOS. Pero esto no da una buena UX para quitar todo el selector de componentes y reemplazar con ActionSheet.

    Yo lo hice y funciona muy bien. La razón preferí ActionSheet sobre otros componentes sugeridos por jevakallio porque es desarrollado por la RN equipo y tiene un buen nativo de sentimiento. La última opción sugerida reaccionar-nativo-modal-selector de también es muy bueno.

    Reaccionar Nativas de ios selector está siempre abierta

    ActionSheet no debería ser reservado para las acciones?

    OriginalEl autor Abhishek Nalin

  2. 8

    Que así es como la de iOS UIPickerView componente funciona – no hay manera de personalizar.

    Si quieres un tipo diferente de elemento de interfaz de usuario, tendrá que escribir su propia cuenta, o utilizar una de las muchas bibliotecas de código abierto, tales como:

    Buscar en google con estos, y palabras claves similares, los rendimientos de muchas otras bibliotecas.

    OriginalEl autor jevakallio

  3. 0

    No sé por qué te gustaría elegir la respuesta con ActionSheet aceptado como respuesta.
    Sin embargo, voy a dar una solución para este problema:

    Poner estos valores en su estado:

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

    En su método render hacer lo siguiente:

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

    Así que ahora hemos de comprobar, si nuestro cliente es android o ios. Por lo tanto, la importación de la Plataforma y poner el checkIfIos()-Método en el código:

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

    OriginalEl autor Sercan Samet Savran

Dejar respuesta

Please enter your comment!
Please enter your name here