javascript - 如何在 React Native 中进行条件导航？

Question

您好，我正在尝试在 React Native 中进行条件导航。在我的项目中，我根据 api 获取请求列出了一组类(class)和类别。因此，单击每个类(class)/类别后，它将导航到所以我想要的是点击第一个屏幕中的courses，我将获得当前所选项目的type，无论它是course > 或类别。因此，如果所选项目是原因，我想导航到 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>
  );
}

如何在此处进行条件导航？请帮我找到解决方案。

Answer 1

您可以像这样检查类型并导航，您也可以在 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>