Reactjs 如何在React Native中创建和导航动态路线或屏幕

我正在开发一个在仪表板上有6个图标的应用程序，当你点击它时，它会将你导航到不同的屏幕 我创建了一个可触摸的不透明度来表示每个图标 但是问题是我有很多代码重复，有没有更好的方法来避免重复可触摸的不透明度？ 以下是仪表板和所有项目的代码

export default function Home({ navigation }) {



 const gotoSubs = () => {


 navigation.navigate("Subscription");

  };



 const gotoLoan = () => {
    navigation.navigate("LoanRequest");
  };



 const [modalOPen, setModalOpen] = useState(false);
  return (
    <ImageBackground
      source={require("../assets/Subs.png")}
      style={styles.container}
    >
      <View style={styles.contentholder}>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card} onPress={gotoSubs}>
            <Image
              source={require("../assets/subscription.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Subscription</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card} onPress={()=>setModalOpen(true)}>
            <Image
              source={require("../assets/loanrequest.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Request Loan</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/pending.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Pending Loan Request</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonepayment.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan Payment</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonehistory.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan History</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/recovery.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Recovery</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal visible={modalOPen} style={styles.Loanrequest}>
        <View style={styles.Loanrequest}>
         <TouchableOpacity style={styles.Loancard} onPress={()=>setModalOpen(false)}>
            <Text style={styles.text}>User has not subscribe</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <StatusBar style="auto" />
    </ImageBackground>
  );
}

---

有没有一种方法可以使它更好地链接到平面列表中的所有内容？

您可以创建通用函数并通过要导航的屏幕，因此只有一种方法可以导航到所需的屏幕：

export default function Home({ navigation }) {



 const gotoScreen = (screenName) => {
   navigation.navigate(screenName);
 };


 const [modalOPen, setModalOpen] = useState(false);
  return (
    <ImageBackground
      source={require("../assets/Subs.png")}
      style={styles.container}
    >
      <View style={styles.contentholder}>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card} onPress={()=>gotoScreen("Subscription")}>
            <Image
              source={require("../assets/subscription.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Subscription</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card} onPress={()=>setModalOpen(true)}>
            <Image
              source={require("../assets/loanrequest.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Request Loan</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/pending.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Pending Loan Request</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonepayment.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan Payment</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity onPress={()=>{goToScreen("LoanRequest")}} 
            style={styles.card}>
            <Image
              source={require("../assets/lonehistory.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan History</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/recovery.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Recovery</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal visible={modalOPen} style={styles.Loanrequest}>
        <View style={styles.Loanrequest}>
         <TouchableOpacity style={styles.Loancard} onPress={()=>setModalOpen(false)}>
            <Text style={styles.text}>User has not subscribe</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <StatusBar style="auto" />
    </ImageBackground>
  );
}

导出默认函数主页（{navigation}）{
const gotoScreen=（屏幕名）=>{
导航。导航（屏幕名称）；
};
const[modalOPen，setModalOpen]=useState（false）；
返回(
gotoScreen（“订阅”）}>
订阅
setModalOpen（真）}>
申请贷款
待决贷款请求
贷款支付
{goToScreen（“LoanRequest”）}
style={style.card}>
贷款历史
恢复
setModalOpen（假）}>
用户尚未订阅
);
}

我是否可以将所有可触摸的不透明度放在一个数组中，调用它们并传递一个函数以引导到不同的屏幕，而不是像我做的那样重复它们。是的，您可以制作json，然后根据您的要求将数据传递给组件。很抱歉，我真的问了一个问题，我怎么做？我不太熟悉技术如果您需要多种类型的组件作为

TouchableOpacity

的子组件，那么您不能选择此json选项，如果子组件的时间相同，那么您可以实现它。对，这可以帮助您。

export default function Home({ navigation }) {



 const gotoScreen = (screenName) => {
   navigation.navigate(screenName);
 };


 const [modalOPen, setModalOpen] = useState(false);
  return (
    <ImageBackground
      source={require("../assets/Subs.png")}
      style={styles.container}
    >
      <View style={styles.contentholder}>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card} onPress={()=>gotoScreen("Subscription")}>
            <Image
              source={require("../assets/subscription.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Subscription</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card} onPress={()=>setModalOpen(true)}>
            <Image
              source={require("../assets/loanrequest.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Request Loan</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/pending.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Pending Loan Request</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/lonepayment.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan Payment</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.content}>
          <TouchableOpacity onPress={()=>{goToScreen("LoanRequest")}} 
            style={styles.card}>
            <Image
              source={require("../assets/lonehistory.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Loan History</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.card}>
            <Image
              source={require("../assets/recovery.png")}
              style={styles.img}
            />
            <Text style={styles.text}>Recovery</Text>
          </TouchableOpacity>
        </View>
      </View>
      <Modal visible={modalOPen} style={styles.Loanrequest}>
        <View style={styles.Loanrequest}>
         <TouchableOpacity style={styles.Loancard} onPress={()=>setModalOpen(false)}>
            <Text style={styles.text}>User has not subscribe</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <StatusBar style="auto" />
    </ImageBackground>
  );
}