React-Nativeのルーティング使用

React-Nativeのルーティング使用シーン
トップページや他のページでは、携帯電話のタオバオのように、商品ごとに商品の詳細が存在します.江寧区をクリックすると別のページに切り替わります.ここでの応用はルートで実現されています.以下、Reactのルートの使用について簡単に説明します.React-Nativeルーティング使用手順

インストールルート:プロジェクトの端末でコマンドを実行するnpm i react-native-router-flux --save

ルーティング関連のコンポーネントをインポート(ルーティングリンクを使用する必要があるページで)、以下のコードと注記

//         
//Router:     vue  HashRouter
//Stack:          ，         ，          
//Scene：            ，   vue  Route
import{Router, Stack, Scene} from 'react-native-router-flux'

映画コンサルティングの「映画リスト」や「映画詳細」など、クリックして入ったページにリンクするルーティングコンポーネントをインポートします.

import MovieList from "./components/Movie/MovieList"; //        
import MovieDetail from "./components/Movie/MovieDetail";  //        

具体的なルーティングルールを構成する.まずRouterコンポーネントがあり、次にRouterコンポーネントにネストStackおよびsceneがあります.Router全体のルーティングコンポーネントであるがStackルートコンポーネントである異なるルーティングリンクを包むコンテナであり、最後にscene具体的なルーティングリンクであり、何個のルーティングジャンプを実現したいのかscene.各sceneにはいくつかの重要な属性があります.key対応するのはルーティングのルール名です.componentリンクがジャンプしたコンポーネントファイルに対応し、プロジェクトのcomponentsに存在する真のコンポーネントであり、名前が一致しなければならない.title相当aリンクに表示される文字は、以下の例の「映画詳細」のようになります.具体的なコードは以下の通り:

<View style={{height:200}}>  //   Router     View 
      <Router sceneStyle={{backgroundColor: 'white'}}>
        <Stack key="root">
        {/*      */}
        {/*  ：       ，         ，            ，       Scene
           Scene          。    key           ，        key
                。                key，  key    
        hideNavBar     scene    sceneStyle(router     )        router   ，      */}
        <Scene key="app" component={APP} title="App  " hideNavBar={true}/>
          {/*         */}
        <Scene key="movielist" component={MovieList} title="      "/>
        <Scene key="moviedetail" component={MovieDetail} title="      "/>
       </Stack></Router>
    </View>

ルーティングコンポーネントにいくつかのクリックイベント(すなわち、そのルーティングをクリックすると、ページのジャンプに加えて、対応するイベントが発生する)が必要であると仮定すると、ルーティングに使用する必要があるActions;実装の手順は、まずルーティングのコンポーネントを導入することである.例えば

//        
import { Actions } from 'react-native-router-flux'

次に、使用時に要素をバインドonpress属性にコールバック関数を設定します.

<TouchableHighlight underlayColor="#fff" onPress={() => { Actions.moviedetail({ id: item.id }) }}>
// Actions.moviedetail()            ，         ，          ，      id

注意:上のActions.key(ポイントの後ろの名前は必ずsceneのルートのルール名)です.ここのように映画リストの各レコードは、クリック時にジャンプするのが映画の詳細ページコンポーネントなので、必ずmoviedetailです.
まとめ
具体的にはReactのルートは以下のapiガイドに参加できます

ルーティング関連構成:https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md

ルーティングが簡単なDEMO:https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MINI_TUTORIAL.md