1. 運行yarn add react-native-router-flux安裝路由的包；
2. 注意：react-native-router-flux只提供了編程式導航，并沒有提供標簽式導航；也就是锐涯，必須使用路由提供的 JS API 實現(xiàn)路由的導航犬辰；
3. react-native-router-flux包中嗦篱，提供了三個最基本的組件：
   • Router表示 路由的根容器，在一個RN項目中幌缝，Router組件應該只出現(xiàn)一次灸促，就好比React網(wǎng)頁項目開發(fā)中的HashRouter；
   • Stack 表示 路由的分組涵卵，所有的 路由規(guī)則浴栽，必須嵌套到 Stack中，否則路由無法正常使用轿偎；
   • Scene 在RN項目中典鸡，每個Scene就表示一個路由規(guī)則
     • key（必選項）是當前這個路由規(guī)則的唯一標識符，每個Scene路由規(guī)則坏晦，必須提供一個key屬性萝玷；
     • component（必選項）表示當前路由規(guī)則匹配成功后，展示哪個組件頁面昆婿；
     • title（可選項）表示 路由規(guī)則匹配成功后球碉，在頁面頂部展示的頁面名稱；

路由的一些基本使用方法

1. 實現(xiàn)路由的編程式導航跳轉：

    // Actions 提供了編程式跳轉的能力
   import { Actions } from 'react-native-router-flux';
   
   // 從 A 頁面 -> B 頁面
   Actions.頁面的key()
   

2. 路由跳轉并傳參：

   // 跳轉并傳遞 一個參數(shù)對象仓蛆，注意睁冬， 參數(shù)對象中，不要使用 name, 因為 name 有特殊含義看疙；
   Actions.movieview({ username: 'zs', age: 20 })
   
   // 在 頁面中豆拨，直接訪問 this.props 就能夠拿到路由傳遞的參數(shù)：
   console.warn(this.props.username)
   console.warn(this.props.age)
   

3. 使用Scene組件的hideNavBar屬性，隱藏指定頁面的導航條狼荞；

    <Scene key="homeview" component={Home} hideNavBar={true}></Scene>
   

4. 使用Actions.pop()實現(xiàn)路由的后退功能辽装；

5. 使用路由中提供了Tabs組件帮碰，來設置 tabbar:

    // 1. 需要把 tabbar 相關的 Scene 相味，統(tǒng)一嵌套到 同一個 tabs 組件中：
   <Router>
         <Tabs key="root" tabBarStyle={{ backgroundColor: 'pink' }} tabBarPosition="bottom">
           {/* 注意： 在 路由規(guī)則中，第一個路由規(guī)則殉挽，就是項目的首頁 */}
           <Scene 
               key="homeview" 
               component={Home} 
               hideNavBar={true} 
               title="首頁" 
               tabBarLabel="自定義Label" 
               icon={() => <Image source={require('./images/menu1.png')} style={{ width: 25, height: 25 }} />}></Scene>
           <Scene key="movieview" component={Movie} title="電影列表"></Scene>
           <Scene key="aboutview" component={About} title="關于我們"></Scene>
         </Tabs>
       </Router>
   

   • 通過 為 Scene提供tabBarLabel設置tab欄的文字丰涉；通過icon設置tab欄的圖標；

6. 如果只想有一個在頂部顯示的tab欄斯碌，并且一死，不期望有Icon圖標，默認只顯示文字傻唾，此時投慈，大家需要顯示的為tabs組件承耿，設置tabBarPosition="top"屬性：

    <Tabs key="root" tabBarStyle={{ backgroundColor: '#50B2FF' }} tabBarPosition="top">
   </Tabs>