react-native安装路由

1. 运行yarn add react-native-router-flux安装路由的包；
2. 注意：react-native-router-flux只提供了编程式导航，并没有提供标签式导航；也就是，必须使用路由提供的 JS API 实现路由的导航；
3. react-native-router-flux包中，提供了三个最基本的组件：
   • Router表示 路由的根容器，在一个RN项目中，Router组件应该只出现一次，就好比React网页项目开发中的HashRouter；
   • Stack 表示 路由的分组，所有的 路由规则，必须嵌套到 Stack中，否则路由无法正常使用；
   • Scene 在RN项目中，每个Scene就表示一个路由规则
     • key（必选项）是当前这个路由规则的唯一标识符，每个Scene路由规则，必须提供一个key属性；
     • component（必选项）表示当前路由规则匹配成功后，展示哪个组件页面；
     • title（可选项）表示 路由规则匹配成功后，在页面顶部展示的页面名称；

路由的一些基本使用方法

1. 实现路由的编程式导航跳转：

    // Actions 提供了编程式跳转的能力
   import { Actions } from 'react-native-router-flux';
   
   // 从 A 页面 -> B 页面
   Actions.页面的key()
   

2. 路由跳转并传参：

   // 跳转并传递 一个参数对象，注意， 参数对象中，不要使用 name, 因为 name 有特殊含义；
   Actions.movieview({ username: 'zs', age: 20 })
   
   // 在 页面中，直接访问 this.props 就能够拿到路由传递的参数：
   console.warn(this.props.username)
   console.warn(this.props.age)
   

3. 使用Scene组件的hideNavBar属性，隐藏指定页面的导航条；

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

4. 使用Actions.pop()实现路由的后退功能；

5. 使用路由中提供了Tabs组件，来设置 tabbar:

    // 1. 需要把 tabbar 相关的 Scene ，统一嵌套到 同一个 tabs 组件中：
   <Router>
         <Tabs key="root" tabBarStyle={{ backgroundColor: 'pink' }} tabBarPosition="bottom">
           {/* 注意： 在 路由规则中，第一个路由规则，就是项目的首页 */}
           <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>