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

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

如果您希望选择器显示选定的第一个项目。您只需将一个空对象传递给占位符即可。参考这个docs。

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

/>

同时，您可以有一个状态变量，其中选择了第一个项目，并且您在 onValueChange 中使用相同的变量

例如：

const [selected, setSelected] = useState('A');

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

注意：您将无法添加任何占位符。您可以在组件上方添加标签:)

Answer 3

这对我有用：

使用选项 overflow: 'hidden'

将属性“pickerProps”添加到 RNPickerSelect

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

Answer 4

只是想分享在设置我的选择器组件并遇到相同问题时对我有用的方法。

在下面的示例中，

useEffect

将初始选取器值设置为第二个选项。

export default function ContactPicker({ contacts, contact, setContact, setNewState }) {

  useEffect(() => {
    contacts?.length > 1 && setContact(contacts[1]['id'])
  }, [contacts])

  return (
    <View>
      <Picker
        selectedValue={contact}
        onValueChange={(itemValue, itemPosition) => {
          setContact(itemValue)
          setNewState(prev => ({ ...prev, contact_id: itemValue }))
        }}
      >
        {contacts?.map((contact, index) => (
          <Picker.Item
            key={index}
            label={contact.name}
            value={contact.id}
          />
        ))}
      </Picker>
    </View>
  )
}

Answer 5

结合其他人所说的，我找到了解决方法。缺点是显示始终是浅色占位符颜色，您将在顶部和中间显示当前选项的文本，但至少它不会恢复为空或标准值...

我将状态值放入占位符值和值选项中。

const list = [1, 2, 3, 4, 5]

const Component = () => {
const [value, setValue] = useState(apiVal)

const items = list.map(item => ({
    label: `Value level: ${item.toString()}`,
    value: item,
  }))

  return (
    <View style={styles.container}>
      <RNPickerSelect
        Icon={() => <Octicons name='single-select' size={20} />}
        onValueChange={value => setValue(value)}
        items={items}
        placeholder={{label: `Current choice: ${value}`, value: value}}
        value={value}
      />
    </View>
  )
}