如何让 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>

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

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>

Answer 2

我刚刚遇到这个并且面临同样的问题，滚动到达新项目并重置到第一个项目。 我已经使用无状态组件（Hooks）做到了这一点：

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

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

const [selected, setSelected] = useState(0)

Picker 组件：

<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 项中对其进行了更新，将 value 保持为 index。

Answer 3

我使用了这个“黑客”：

render() {
    const values = ['1', '2'];

    return (
      <Picker
        value={this.state.value}
        onValueChange={this.onValueChange.bind(this)}
      >
      {
                <Picker
                    value={this.state.value}
                    onValueChange={this.onValueChange.bind(this)}
                >
                {
                    [<Picker.Item
                        label="n/a"
                        value={null}
                    />].concat(values.map(value => {
                            return (
                                <Picker.Item
                                    label={value}
                                    value={value}
                                />
                            )
                            })
                    ) 
                }
                </Picker>
    );
  }