React Native Picker：设置和获取不同的 Picker 值

Question

我正在使用 React Native Picker，我创建了两个状态：userType 和 name。

但是，有两个userType：Freelancer，Client。每个 userType 还有两个 name，它们是：Freelancer 1、Freelancer 2 和 客户端 1, 客户端 2.

目前，我有两个拾取器。一个有 userType，另一个有 name。无论选择 userType，第二个选择器会显示所有 name，即 Freelancer 1、Freelancer 2、Client 1、Client 2。

但这就是我想要达到的目标：

HOW TO: Instead of showing all the name, I want to show specific name depending on the userType selected. For example: if userType === Freelancer, then name picker should display only Freelancer 1, Freelancer 2. And, if userType === Client, then name picker should display only Client 1, Client 2.

下面提供的代码片段：

constructor(props) {
    super(props);
    this.state = {
        userType: '',
        name: '',
    }
}

render() {
    return (
        <View>
            <View style={{ flexDirection: 'row' }}>
                <Text style={styles.titleStyle}>User Type</Text>
                <View style={styles.pickerStyle}>
                    {<Picker
                        mode='dropdown'
                        selectedValue={this.state.userType}
                        onValueChange={(itemValue, itemIndex) =>
                            this.setState({ userType: itemValue })
                        }>
                        <Picker.Item label="Select User Type" value="" />
                        <Picker.Item label="Freelancer" value="Freelancer" />
                        <Picker.Item label="Client" value="Client" />
                    </Picker>}
                </View>
            </View>
            <View style={{ flexDirection: 'row' }}>
                <Text style={styles.titleStyle}>Name</Text>
                <View style={styles.pickerStyle}>
                    {<Picker
                        mode='dropdown'
                        selectedValue={this.state.name}
                        onValueChange={(itemValue, itemIndex) =>
                            this.setState({ name: itemValue })
                        }>
                        <Picker.Item label="Please Select" value="" />
                        <Picker.Item label="Freelancer 1" value="Freelancer 1" />
                        <Picker.Item label="Freelancer 2" value="Freelancer 2" />
                        <Picker.Item label="Client 1" value="Client 1" />
                        <Picker.Item label="Client 2" value="Client 2" />
                    </Picker>}
                </View>
            </View>
        </View>
    );
};

应用截图：

Answer 1

你应该有return根据用户类型

用户名的功能

renderUserNames() {
   if(this.state.userType=='Freelancer'){
    return [<Picker.Item label="Freelancer 1" value="Freelancer 1" />,
           <Picker.Item label="Freelancer 2" value="Freelancer 2" />]
   }else{
        return [<Picker.Item label="Client 1" value="Client 1" />,
         <Picker.Item label="Client 2" value="Client 2" />]
     }
}

然后在渲染函数中你可以调用 i like

 render() {
let options=this.renderUserNames();
return (
    <View>
        <View style={{ flexDirection: 'row' }}>
            <Text style={styles.titleStyle}>User Type</Text>
            <View style={styles.pickerStyle}>
                {<Picker
                    mode='dropdown'
                    selectedValue={this.state.userType}
                    onValueChange={(itemValue, itemIndex) =>
                        this.setState({ userType: itemValue })
                    }>
                    <Picker.Item label="Select User Type" value="" />
                    <Picker.Item label="Freelancer" value="Freelancer" />
                    <Picker.Item label="Client" value="Client" />
                </Picker>}
            </View>
        </View>
        <View style={{ flexDirection: 'row' }}>
            <Text style={styles.titleStyle}>Name</Text>
            <View style={styles.pickerStyle}>
                {<Picker
                    mode='dropdown'
                    selectedValue={this.state.name}
                    onValueChange={(itemValue, itemIndex) =>
                        this.setState({ name: itemValue })
                    }>
                    <Picker.Item label="Please Select" value="" />
                         {options}

                </Picker>}
            </View>
        </View>
    </View>
);
 };

React Native Picker：设置和获取不同的 Picker 值

React Native Picker: Set and Get different Picker Values

javascript

react-native

react-native-picker-select