So implementieren Sie den nativen Routing-Sprung von React

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!