React Native Picker：显示不同的项目列表答案

【问题标题】：React Native Picker: Show different item listsReact Native Picker：显示不同的项目列表
【发布时间】：2020-01-02 09:32:52
【问题描述】：

我正在学习使用 React Native Picker。现在，作为示例，我添加了两个user type：Freelancer 和Client。

我想根据所选的user type 显示不同的picker item。目前，无论user type 被选中，我的应用都会显示所有项目。

例如：如果用户选择user typeFreelancer，我想将picker item显示为Freelancer 1和Freelancer 2 .

如果用户选择user type Client，我想将picker item 显示为Client 1 和Client 2。

我是新手，因此我们将不胜感激。

下面提供的代码 sn-p：

export default class FrTopUpScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            userType: '',
            clientName: '',
            freelancerName: '',
        }
    }
    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>
        );
    };
};

【问题讨论】：

您必须使用多个选择器才能这样做
我只想根据所选的user type 显示不同的name 选择器列表。在这种情况下，如果user type 是Freelancer，那么我想用Freelancer 1 和Freelancer 2 显示选择器。而且，如果user type 是Client，那么我想用Client 1 和Client 2 显示选择器。关于多个选择器，我不确定。
那么当用户选择一个时，你想在同一个选择器中显示不同的选项吗？
是的。如果可能的话，类似的东西。

标签： react-native react-native-picker-select

【解决方案1】：

你应该试试这样的：

var pickerItems = ["Freelancer","Client"];
var freelancer =["Freelancer1","Freelancer2"];
var client =["Client1","Client2"];

<Picker
    style={{your_style}}
    mode="dropdown"
    selectedValue={this.state.selected}
    onValueChange={()=>{
     if(selectedValue == Freelancer)
     {
         this.setState({
              pickerItems=this.state.freelancer
         });
     }
     else{
         this.setState({
              pickerItems=this.state.client
         });
     }
   }}>
    {pickerItems.map((item, index) => {
        return (<Picker.Item label={item} value={index} key={index}/>) 
    })}
</Picker>

【讨论】：

我试过了，但没用，抱歉。我遇到了多个错误。现在在这里发布错误太忙了。不过谢谢你的建议。