Question

我在我的React Native应用中使用RNPickerSelect。我想要三个选项：A B和C。我希望默认选择A（例如，在国家/地区的选择器列表中，默认情况下经常选择USA）。这是我尝试过的：

<RNPickerSelect
  value={{label: 'A', value: 'A'}}
    items={[
      { label: 'A', value: 'A' },
      { label: 'B', value: 'B' },
      { label: 'C', value: 'C' },
    ]}
  onValueChange={value => {}}
/>

默认情况下，确实会选择A，但是问题是它不允许您在之后选择其他任何人。

我应该如何处理？

Answer 1

首先将组件状态设置为

class DropDown extends Component {
   constructor() {
      this.state = {
          dropdownValue: 'A'
      }
   }
   
   handleDropdownChange = (name) => (value) => {
      this.setState({ [name]: value })
   }
   
   render() {
      const { dropdownValue } = this.state  

      return (
         <RNPickerSelect
            value={dropdownValue}
            items={[
              { label: 'A', value: 'A' },
              { label: 'B', value: 'B' },
              { label: 'C', value: 'C' },
            ]}
            onValueChange={this.handleDropdownChange('dropdownValue')}
         />
      )
   }
}

Answer 2

这对我有用：

使用选项 overflow: 'hidden'

将属性“pickerProps”添加到 RNPickerSelect

<RNPickerSelect style={styles.selectContainer}
                ...
                pickerProps={{ style: { height: 214, overflow: 'hidden' } }}
                ...
            />

React Native Picker Select：如何自动选择一个项目，但仍然能够选择其他项目？

2 个答案: