React-Native的路由使用

React-Native的路由使用场景

在一些首页或者其他的页面中，往往存在一些链接(标题)，就像是手机里的淘宝一样，每一种商品都存在商品详情，我们点击江宁区就会切换到另一个页面，这里的应用就是路由实现的，下面就React中的路由的使用做简单的说明

React-Native路由使用步骤

1. 安装路由：在项目的终端运行命令 npm i react-native-router-flux --save
2. 导入路由相关的组件(在需要使用路由链接的页面中)，如下代码和注解

//导入路由相关的组件
//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";  //电影详情页面组件

3. 配置具体的路由规则。首先是要有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>

4. 假设路由组件需要有一些点击事件(即点击该路由，除了页面的跳转，还有相应的事件发生)则还需要用到路由的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指引

1. 路由相关配置：https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md
2. 路由简单的DEMO：https://github.com/aksonov/react-native-router-flux/blob/v3/docs/MINI_TUTORIAL.md