React Native Picker，当从Picker中选择一个选项时，屏幕将转到下一个屏幕

Question

我是一个反应原生的新手，我的代码就像当我点击登录页面中的"Admin"或任何其他类别并按下登录按钮时，当点击Admin时，屏幕会转到Admin页面，当点击"Cocordinator"时，屏幕就会转到coordinator页面。这是我的选取器代码：

<Picker
selectedValue={this.state.role}
style={{height: 50, width: 300}}
onValueChange={(itemValue, itemIndex) =>
this.setState({role: itemValue})
}>
<Picker.Item label="Admin" value="ad" />
<Picker.Item label="Coordinator" value="cod" />
</Picker>

这就是我的状况：

loginRoles(){
if(this.state.Picker.Item==='Admin')
{
this.props.navigation.navigate('AdminHome');
}
else if(this.state.Picker.Item==='Coordinator')
{
this.props.navigation.navigate('CoAdd');
}
else{
alert("Invalid Login");
}
}

显然，问题出在我的情况下，因为它没有解读价值观。

Answer 1

您正在设置role的状态，即this.setState({role: itemValue})

因此，您必须检查this.state.role的值

if(this.state.role === 'ad')
{
this.props.navigation.navigate('AdminHome');
}

请确保将角色的初始值设置为Picker中的第一个值，否则处理程序函数将跳转到else情况。

即this.state = {role : 'ad'}