0

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

我想picker item根据user type所选内容显示不同。目前，我的应用程序显示所有项目，无论user type选择如何。

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

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

我是新来的，所以任何帮助都将受到高度赞赏。

下面提供的代码片段：

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

1 回答 1

0

你应该尝试这样的事情：

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>
于 2020-01-02T10:27:57.167 回答