リアクトネイティブルーティングジャンプの実装方法

反応ネイティブ ルーティング ジャンプを実装する方法: 1. "yarn add reverse-navigation" コマンドを使用して "react-navigation" をインストールします。 2. "yarn add reverse-native-gesture-handler" コマンドを使用します。 「react-native-gesture-handler」コンポーネントをインストールするには; 3. 初期ルートを設定し、それをクラスコンポーネントとしてエクスポートします。

このチュートリアルの動作環境: Windows 10 システム、React Native バージョン 0.67、Dell G3 コンピューター。

反応ネイティブ ルーティング ジャンプを実装するにはどうすればよいですか?

React Native-Route Jump

RN 開発環境をセットアップした後、複数のページ間のジャンプを実装する必要があります。

1. この時点で、react-navigation をインストールする必要があります (以前の Navigator と ex-Navigation は放棄されました)。yarn add reverse-navigation コマンドを使用してインストールします。

2.react-navigation は、react-native-gesture-handler コンポーネントに依存しているため、yarn add reverse-native-gesture-handler コマンドを使用してインストールする必要もあります。

3. 2 つのコンポーネントが正常にインストールされたら、index.js (エントリ ファイル、index.android.js または Index.ios.js) にアプリ コンポーネントを登録し、 setup.js 以降の引用。

4.setup.js に createStackNavigator、createAppContainer の 2 つの関数と 2 つのページをインポートします。

import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";

5. createStackNavigator を使用して 2 つのページのルーティングとタイトル構成をカプセル化し、初期ルーティングを設定します。

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. 構成された AppNavigator を別の関数 createAppContainer でカプセル化し、クラス コンポーネントとしてエクスポートします。

const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
    render() {
        return <AppContainer />;
    }
}

7.react-native run-android を実行します。エラーがある場合は、Google に問い合わせて段階的に解決してください。 Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED エラーが発生した場合は、https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767 に従って解決してください。

推奨される学習: 「react ビデオ チュートリアル 」

以上がリアクトネイティブルーティングジャンプの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。