0

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

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

4

1 回答 1

0

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

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>
  );
}
于 2021-05-27T15:30:07.197 回答