So implementieren Sie React Native Route Jump: 1. Verwenden Sie den Befehl „Yarn Add React-Navigation“, um „React-Navigation“ zu installieren. 2. Verwenden Sie den Befehl „Yarn Add React-Native-Gesture-Handler“, um „React -native- Geste-Handler“-Komponente; 3. Richten Sie die anfängliche Route ein und exportieren Sie sie dann als Klassenkomponente.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, React Native Version 0.67, Dell G3-Computer.
Wie implementiert man einen nativen Routensprung?
React Native-Route Jump
Nach dem Einrichten der RN-Entwicklungsumgebung ist es notwendig, Sprünge zwischen mehreren Seiten zu realisieren.
1. Zu diesem Zeitpunkt müssen Sie React-Navigation installieren (der vorherige Navigator und Ex-Navigation wurden aufgegeben) und zum Installieren den Befehl „garn add“ React-Navigation verwenden.
2.react-navigation hängt von der Komponente „react-native-gesture-handler“ ab und muss daher auch mit dem Befehl „garn add“ „react-native-gesture-handler“ installiert werden.
3. Nachdem die beiden Komponenten erfolgreich installiert wurden, registrieren Sie eine App-Komponente in index.js (Eintragsdatei, die index.android.js oder index.ios.js sein kann) und verweisen Sie auf setup.js.
4. Importieren Sie die beiden Funktionen createStackNavigator und createAppContainer und zwei Seiten in setup.js.
import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";5. Verwenden Sie createStackNavigator, um die Routing- und Titelkonfiguration der beiden Seiten zu kapseln und das anfängliche Routing festzulegen.
const AppNavigator = createStackNavigator({
Login: {
screen:Login,
navigationOptions: {
title: '冷链物流助手',
headerTitleStyle:{
textAlign: 'center',
flex:1,
}
}
},
ScanDevice: {
screen:ScanDevice,
navigationOptions: {
title: '扫描设备',
headerTitleStyle:{
textAlign: 'center',
marginLeft:-25,
flex:1,
}
}
},
},{
initialRouteName: 'Login'
});
6. Kapseln Sie den konfigurierten AppNavigator mit einer anderen Funktion createAppContainer und exportieren Sie ihn dann als Klassenkomponente.
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
7. Wenn ein Fehler auftritt, fragen Sie bitte Google, um ihn Schritt für Schritt zu beheben. Wenn der Fehler Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED auftritt, folgen Sie bitte https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767, um ihn zu beheben.
Empfohlenes Lernen: „Video-Tutorial reagieren“
Das obige ist der detaillierte Inhalt vonSo implementieren Sie den nativen Routing-Sprung von React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
