如何讓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屬性的|| '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

我用這個“黑客”：

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>
    );
  }