Mode in reagieren native Picker funktioniert nicht

Question

Ich möchte eine Auswahl des Geschlechts mit Picker machen. aber der Modus funktioniert nicht in iOS. Ich bin nicht sicher in Android.

<Picker 
    style={{justifyContent: 'center',backgroundColor: 'white'}} 
    selectedValue={this.state.gender} 
    onValueChange={(gender) => this.setState({ gender })} 
    mode='dialog' 
> 
    <Item label="Male" value="Male" /> 
    <Item label="Female" value="Female" /> 
</Picker> 

Hoffnung jemand einen Vorschlag machen könnte .. Danke

Answer 1

Die <Picker> Komponente macht als UIPickerView auf iOS - das ist, was du da bist zu sehen. Dieser Picker wird anstelle eines modalen Renderings gerendert (wie bei Android) - die von Ihnen angegebene mode Prop gilt nur für Android.

Es gibt zwei Optionen: Rendern Sie den Picker innerhalb von etwa <Modal> oder verwenden Sie eine andere Komponente vollständig.

Answer 2

Ich löste diese Art von Problem, indem ich so vorging.

import PickerExample from './PickerExample.js'; 

class Sample extends React.Component { 
constructor(props) { 
    super(props); 
    this.state = {gender: '',}; 
    this.updateGender = this.updateGender.bind(this); 
} 
updateGender(val){ 
    this.setState({ 
gender: val 
},function(){ 
    alert("callback function as your wish") 
}); 
} 
render(){ 
return (
    <PickerExample gender={this.state.gender} updateGender={this.updateGender.bind(this)} /> 
); 
} 

Die Datei PickerExample.js sieht so aus.

export default PickerExample = (props) => { 
return (
    <Picker selectedValue = {props.gender} onValueChange = {props.updateGender}> 
    <Picker.Item label = "MALE" value ="Male" /> 
    <Picker.Item label = "Female" value = "female" /> 
    </Picker> 
); 

}