Question

如果我需要在<Picker>..</Picker>内多次使用<View>..</View>，我如何选择不同<Picker>的选定值，因为this.state.PickerValue会给出所选值。

Answer 1

尝试这样的事情

构造函数

constructor(props) {
    super(props);
    this.state = {
       language: '',
       level: '',
    };
}

您渲染方法

<View style={styles.container}>
    <Picker
       selectedValue={this.state.language}
       style={{ height: 50, width: '100%' }}
       onValueChange={(itemValue, itemIndex) =>
          this.setState({ language: itemValue })}>
       <Picker.Item label="Java" value="java" />
       <Picker.Item label="JavaScript" value="js" />
    </Picker>

    <Picker
       selectedValue={this.state.level}
       style={{ height: 50, width: '100%' }}
       onValueChange={(itemValue, itemIndex) =>
          this.setState({ level: itemValue })}>
       <Picker.Item label="Beginner" value="beginner" />
       <Picker.Item label="Intermediate" value="intermediate" />
       <Picker.Item label="Professional" value="professional" />
    </Picker>
</View>

查看live demo here

详细了解Picker API here

Answer 2

使用不同的状态值，每个选择器一个。

import React, { Component } from 'react';
import { View, Picker } from 'react-native';

class PickersComp extends Component {
  state = {
    val1 : '',
    val2: '',
    val3: '',
  }

  render(){
    return (
      <View>
        <Picker
          selectedValue={this.state.val1}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) => this.setState({ val1: itemValue })}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
        </Picker>

        <Picker
          selectedValue={this.state.val2}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) => this.setState({ val2: itemValue })}>
          <Picker.Item label="foo" value="foo" />
          <Picker.Item label="bar" value="bar" />
        </Picker>

        <Picker
          selectedValue={this.state.val3}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) => this.setState({ val3: itemValue })}>
          <Picker.Item label="test" value="test" />
          <Picker.Item label="test2" value="js" />
        </Picker>
      </View>
    );
  }
};

<view>中有多个<picker>是可能的吗？

2 个答案: