[英]How to do conditional navigation in react native?
Hello I'm trying to do conditional navigation in react native.In my project I'm listing a set of courses and categories as a result of an api fetch request.So after clicking on each course/category it will navigate to different screens.So What I want is on clicking on the courses
in first screen I will get the type
of currently selected item that whether it is course
or category
. 您好,我试图在react native中进行条件导航。在我的项目中,由于api提取请求,我列出了一组课程和类别,因此在单击每个课程/类别后,它将导航到不同的屏幕。所以我想要的是在第一个屏幕上单击
courses
,我将获得当前所选项目的type
,无论是course
还是category
。 So if selected item is couse I want to navigate to UnitListing
screen and if it is category
I want to navigate to ChapterListing
screen.How is it possible? 因此,如果选中项目是因为我想导航到
UnitListing
屏幕,如果是category
我想导航到ChapterListing
屏幕。怎么办?
updated 更新
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>
);
}
How do I do conditional navigation here? 如何在此处进行条件导航? Please help me to find a solution.
请帮助我找到解决方案。
you can check type like this way and navigate also you can do in jsx. 您可以像这样检查类型并浏览,也可以在jsx中进行。 but this is much cleaner
但这更干净
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.