反应原生选择器的模式不起作用

Question

我想使用选择器进行性别选择。但模式不适用于ios。我不确定在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>

希望有人能给出一些建议.. 谢谢

Answer 1

<Picker>组件在iOS上呈现为$_SESSION[$value][]= 's'; - 这就是您在那里看到的内容。此选择器就地呈现而不是模态（如Android上的情况） - 您指定的UIPickerView道具仅适用于Android。

有两种选择：在<Modal>之内渲染选择器或完全使用不同的组件。

Answer 2

我这样解决了这类问题。

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

PickerExample.js文件看起来像这样。

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

}

Answer 3

我为 iOS 特定选择器使用 .ios.jsx 扩展。我的代码如下：

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