如何让 react-native Picker 停留在新选择的选项上？

Question

我有一个正在 iOS 上测试的选择器，有两个选项。每次我从第一个选项向下拖动到第二个选项时，选择器会立即返回到第一个选项。

这就是我的选择器代码的样子。

 <Picker
      style={{
        width: 100,
      }}
      selectedValue={(this.state && this.state.pickerValue) || 'a'}
      onValueChange={(value) => {
        this.setState({value});
      }} itemStyle={{color: 'white'}}>
      <Picker.Item label={'Hello'} value={'a'} />
      <Picker.Item label={'World'} value={'b'} />
</Picker>

我希望选择器停留在新滚动到的选项上。我还删除了 || 'a' 部分 selectedValue 属性，但这也没有解决问题。

原文由 Gabriel Garrett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在值更改时，您需要指定状态的哪个属性发生更改，并相应地使用 this.setState 进行更改

onValueChange={(value) => {this.setState({pickerValue: value});

完整代码

<Picker
      style={{
        width: 100,
      }}
      selectedValue={(this.state && this.state.pickerValue) || 'a'}
      onValueChange={(value) => {
        this.setState({pickerValue: value});
      }} itemStyle={{color: 'white'}}>
      <Picker.Item label={'Hello'} value={'a'} />
      <Picker.Item label={'World'} value={'b'} />
</Picker>

原文由 Nakib 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我刚遇到这个并面临同样的问题，滚动到达新项目并重置为第一个项目。我使用无状态组件（Hooks）完成了这项工作：

我有一个 对象数组 作为 值 和 选项 作为 键

const data = useState({
"options":[{
"name":"Dish 1","price":0},{"name":"Dish 2","price":0}]})

const [selected, setSelected] = useState(0)

选择器组件：

 <PickerIOS
    selectedValue={selected_choice}
    onValueChange={(value, index) => {
            set_selected_choice(index)
          }}
        >
          {data?.map((item, index) => (
            <PickerIOS.Item
              key={item}
              value={index}
              label={item.name}
            />
          ))}
</PickerIOS>

在这里，我存储了处于选定状态的数组元素的索引，并从 PickerIOS Item 更新了它，将 值 保持为 index 。

原文由 Abhishek Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议