Блог

Главная - Вопросы по программированию - Как создавать и перемещаться по динамическим маршрутам или экранам в React Native

Как создавать и перемещаться по динамическим маршрутам или экранам в React Native

#reactjs #react-native #react-navigation #react-flatlist

Вопрос:

Я разрабатываю приложение, в котором есть 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);

есть ли способ сделать это лучше, включив все ссылки в единый список?

Ответ №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>
  );
}

Комментарии:

1. могу ли я поместить все осязаемые непрозрачности в один массив, вызвать их и передать функцию, которая приведет к разным экранам, вместо того, чтобы повторять их, как я это делал

2. Да, вы можете создать json, а затем передать данные компонентам в соответствии с вашими требованиями.

3. я прошу прощения за то, что действительно спрашиваю, пожалуйста, как мне это сделать, я на самом деле не знаком с технологией react

4. если вам нужен компонент нескольких типов в качестве дочернего TouchableOpacity компонента, вы не можете выбрать этот параметр json, если у дочернего компонента одинаковое время, то вы можете этого достичь.

5. Верно, это может вам помочь.

Метки: