Ios 反应本机选择器中的模式不工作

我想使用picker进行性别选择。但这种模式在ios中不起作用。我不确定在安卓系统

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

this.setState（{gender}）
模式class='dialog'
>

希望有人能给点建议。。 谢谢

组件在iOS上呈现为

UIPickerView

——这就是您在那里看到的。此选取器在适当的位置而不是在模式中呈现（在Android上就是这样）-您指定的

模式

道具仅适用于Android

---

有两种选择：在类似于的对象中渲染选择器，或者完全使用不同的组件。

我通过这样做解决了这类问题

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

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

import PickerExample from./PickerExample.js'；
类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={性别：''，}；
this.updateGender=this.updateGender.bind（this）；
}
更新文件夹（val）{
这是我的国家({
性别:val
}，函数（）{
警报（“根据您的意愿回调函数”）
});
}
render（）{
返回(
);
}

PickerExample.js文件如下所示

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

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

export default PickerExample=（道具）=>{
返回(
);

---

}

我使用

.ios.jsx

扩展名作为特定于ios的选择器。我的代码如下：

export const SelectWidget = ({ 
  selectedOption, 
  setSelectedOption, 
  placeholderLabel,
  options
}) => {

  const items = options.map((option) => {
    return <Picker.Item
      key={option.key ?? option.label} 
      label={option.label} 
      value={option.value}
     />;
  });

  return (
    <Picker
      onValueChange={(value) => {
        setSelectedOption(value);
      }}
      placeholder={{
        label: placeholderLabel,
        value: null,
      }}
      selectedValue={selectedOption}
      style={{
        width: '100%', // fill up the width of the device (without this, nothing gets displayed
      }}
      itemStyle={{
        height: 150, // this reduces the height of the selector
        color: colors.text, // if you're in dark mode set this to white.
      }}
    >
      // default item
      <Picker.Item label={placeholderLabel} value={null} />
      {items}
    </Picker>
  );
};

export const SelectWidget=（{
选择选项，
设置选择选项，
占位符标签，
选择权
}) => {
const items=options.map（（选项）=>{
返回；
});
返回(
{
设置选择选项（值）；
}}
占位符={{
标签：占位符标签，
值：null，
}}
selectedValue={selectedOption}
风格={{
宽度：“100%”，//填充设备的宽度（如果没有此选项，则不会显示任何内容
}}
项目风格={{
高度：150，//这会降低选择器的高度
color:colors.text，//如果处于暗模式，请将其设置为白色。
}}
>
//默认项
{items}
);
};

谢谢..我会再试一次，因为我已经试过了，但即使我设置了height:height/2，它也会覆盖整个屏幕