你好,我试图在react native中进行条件导航。在我的项目中,由于api提取请求,我列出了一组课程和类别,因此在单击每个课程/类别后,它将导航到不同的屏幕。所以我想要的是在第一个屏幕上单击courses
,我将得到当前选择的项目type
是course
还是category
。因此,如果选中项目是原因,我想导航到UnitListing
屏幕,如果是category
我想导航到ChapterListing
屏幕。怎么可能?
已更新
navigatetoPage = (category) =>{
const page = category.type == "course" ? "UnitListing" : "ChapterListing";
this.props.navigation.navigate(page, {
id: category.id,
type: category.type
})
}
render(){
return(
<View style={st.main_outer}>
{this.state.cats.map(category =>
<TouchableOpacity
style={st.btn} onPress={() => this.navigatetoPage({category})}>
<Text style={{ color: "#fff" }}>View Course</Text>
</TouchableOpacity>
)}
</View>
);
}
如何在此处进行条件导航?请帮助我找到解决方案。
答案 0 :(得分:3)
您可以像这样检查类型并浏览,也可以在jsx中进行。但这更干净
navigatetoPage(data){
const page = data.type == "course" ? "UnitListing" : "ChapterListing";
this.props.navigation.navigate(page, {
id: data.id,
type: data.type
})
}
<TouchableOpacity
style={st.btn} onPress={() => this.navigatetoPage(data)}>
<Text style={{ color: "#fff" }}>View Course</Text>
</TouchableOpacity>