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

Question

我正在开发一个应用程序，它在仪表板上有 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>
  );
}

这是我的导航文件的代码

import {createStackNavigator} from 'react-navigation-stack';
 import {createAppContainer} from 'react-navigation';
import Home from '../screens/Home';
import Subscription from '../screens/Subscription';
import LoanRequest from '../screens/LoanRequest'



const screens = {
    Home:{
        screen: Home,
        navigationOptions:{
            title:'',
            headerStyle:{
                backgroundColor:'#122C91'
            }
        }
    },
 
    Subscription:{
        screen: Subscription,
        navigationOptions:{
            color:'#fff',
            headerStyle:{
                backgroundColor:'#122c91',
            },
            headerTintColor: '#fff',
        }
    },
    LoanRequest: {
        screen: LoanRequest,
        navigationOptions: {
            color:'#fff',
            headerStyle:{
                backgroundColor:'#122c91',
            },
            headerTintColor: '#fff', 
        }
    },
    LoanPayment: {
        screen: Loanpayment,
        navigationOptions: {
            color:'#fff',
            headerStyle:{
                backgroundColor:'#122c91',
            },
            headerTintColor: '#fff', 
        }
    },
    Loanpending: {
        screen: Loanpending,
        navigationOptions: {
            color:'#fff',
            headerStyle:{
                backgroundColor:'#122c91',
            },
            headerTintColor: '#fff', 
        }
    }
 

}
const HomeStack = createStackNavigator(screens);
export default createAppContainer(HomeStack);

有没有办法让它更好的链接包括在一个平面列表中？

Answer 1

您可以创建常用功能并传递您要导航的屏幕，因此只有一种方法可以导航到所需的屏幕：

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>
  );
}