反应本机选择器中的模式不起作用

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 上呈现为 UIPickerView - 这就是您在那里看到的。这个选择器是就地呈现的，而不是在模式中呈现的（Android 就是这种情况）——你指定的 mode 属性只适用于 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>
  );
};

反应本机选择器中的模式不起作用

Mode in react native picker not working

picker

ios

react-native