sketch - Reaccionar el selector nativo de ios está siempre abierto

sketch templates ios

Question

Tengo dos recogedores en mi pantalla. Cada vez que navego a la pantalla en la aplicación iOS, encuentro que los selectores están siempre abiertos y todas las opciones están visibles.

Funciona perfectamente bien en Android, donde las opciones son visibles solo después de hacer clic en el selector.

¿Alguien puede sugerir una solución para arreglar esto en iOS?

Answer 1

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

Ponga 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 de renderizado haga 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 tenemos que verificar si nuestro cliente es Android o iOS. Por lo tanto, importe la Plataforma y ponga el método checkIfIos () en su 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
});
}
}
}

Answer 2

React-nativo-selector-modal se suspendió. react-native-modal-selector

Answer 3

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

Como responde jevakallio, este es el comportamiento predeterminado en iOS. Pero esto no proporciona un buen UX, así que elimine todos los componentes del selector y sustitúyalos por ActionSheet.

Lo hice y funciona muy bien. La razón por la que preferí ActionSheet sobre otros componentes sugerido por jevakallio porque fue desarrollado por el equipo de RN y tiene un buen sentimiento nativo. La última opción sugerida react-native-modal-picker también es muy buena.

Answer 4

Así es como funciona el componente UIPickerView iOS: no hay forma de personalizarlo.

Si desea un tipo diferente de elemento de la interfaz de usuario, deberá escribir el suyo propio o usar una de las muchas bibliotecas de código abierto, como:

• react-native-dropdown
• react-native-modal-dropdown
• react-native-modal-picker

Buscar en Google con estas y otras palabras clave similares produce también muchas otras bibliotecas.