基于React Native和Ethers.js的电子钱包（二）：路由和导航-白红宇

导航，即Navigator，app的功能入口；

路由，即Router，连接app各个功能的桥梁；

RN里的导航和路由需要添加react-navigation依赖

如果你是强迫症，可以加上latest注解下载最新版本的module （上图红色框部分）

安装成功后，可以看到项目的package.json文件已经自动添加了react-navigation的依赖

先来个最常见的底部导航

有三个导航栏，分别是Home、Friends和Account

每个导航栏对应一个page

以Account为例，其余两个类似

可在工程的根目录下新建Account.js文件

引入需要的组件：

import React from 'react';import {StyleSheet, Text, View} from 'react-native';复制代码

2. render一个文本并直接导出该模块：

export default class Account extends React.Component { render(){   return(     
           
     
      This isAccount!
          
       ) }}复制代码

接着，写主文件NavDemo.js

1. 同样的，先引入所需的React组件：

import React from 'react';import {StyleSheet, Text, View, Button} from 'react-native';import { createAppContainer, createBottomTabNavigator} from 'react-navigation';复制代码

2. 再引入前面写好的三个page：

import HomeContainer from './Home';import Friends from './Friends';import Account from './Account';复制代码

3. 每个page就好比是一个class，将其一一render出来：

class HomeContainerScreen extends React.Component{  render(){    return(      
        )  }}class FriendsScreen extends React.Component {  render(){    return(      
        )  }}class AccountScreen extends React.Component {  render(){    return(      
        )  }}复制代码

4. 因为是底部导航栏，可以选择react-navigation module里的createBottomTabNavigator(RouteConfigs,BottomTabNavigatorConfig)组件：

const stackNav = createBottomTabNavigator(  {    Home: HomeContainerScreen, //Home导航映射到HomeContainerScreen页面    Friends: FriendsScreen,    //Friends映射到FriendsScreen页面    Account: AccountScreen,    //Account映射到AccountScreen页面  },  {    initialRouteName: 'Home', //设置初始页面    tabBarOptions: {      activeTintColor: '#000000',  //活动tab的标签和图标颜色      activeBackgroundColor: '#d6ecf0' //活动tab的背景色    }  });复制代码

实际效果图：

刚才只是一个简单的底部导航功能，但是还没有路由

路由是通过配置一个叫

createStackNavigator(RouteConfigs, StackNavigatorConfig)

该组件也是来自react-navigation模块，对于IOS，页面会从屏幕右侧滑入，而Android则是从底部淡入

于是我在Home页面增加了一个button，通过点击这个button切换到Details页面

import React from 'react';import {StyleSheet, Text, View, Button} from 'react-native';import {createStackNavigator, withNavigation, createAppContainer } from 'react-navigation';import Details from './Details';class HomeScreen extends React.Component { render(){   return(     
           
     
      This isHome!

这时的效果图是这样的：

但是当我点中间的按钮后，神奇的事情发生了。。。

对象没定义？

Gesture是手势的意思，难道光有react-navigation还不行？

一番Google后发现是缺少了react-native-gesture-handler

这个模块包含了手势管理的API，目的是更好的为React Native应用提供触控体验

针对Android，需要修改两个Java文件

一个是android/app/src/main/java/com/awesomeapp/下面的MainActivity.java

另一个是同路径下的MainApplication.java文件

接着，在android/app目录下有个build.gradle文件，打开并在dependencies里添加react-native-gesture-handler模块，目的是将该模块作为jar包进行编译

然后，回到上一层目录，即android目录下，打开settings.gradle文件，同样是添加react-native-gesture-handler

然后在终端内跑一下gradlew.build命令编译

编译成功后，打开模拟器，这是在点击GO TO DETAILS按钮成功跳转

部分代码如下：

FirstPage.js

import React from 'react';import {StyleSheet, Text, View, Button} from 'react-native';import {createStackNavigator, createAppContainer } from 'react-navigation';import HomeView from './Home';import DetailsView from './Details';class HomeViewScreen extends React.Component {  render(){    return(      
        )  }}class DetailsViewScreen extends React.Component {  render(){    return(      
        )  }}const HomeNav = createStackNavigator(  {    HomeView: HomeViewScreen,    DetailsView: DetailsViewScreen  })const HomeContainer = createAppContainer(HomeNav);export default HomeContainer;复制代码

Home.js

import React from 'react';import {StyleSheet, Text, View, Button} from 'react-native';import {createStackNavigator, withNavigation, createAppContainer } from 'react-navigation';class HomeScreen extends React.Component { render(){   return(     
           
     
      This isHome!

Details.js

import React from 'react';import {StyleSheet, Text, View} from 'react-native';import { withNavigation } from 'react-navigation';class Details extends React.Component { render(){   const { navigation } = this.props;   const detailContent =navigation.getParam('content', 'No');  //props.navigation.getParam()得到参数，如果参数为null或未定义，这返回No   return(     
          
     
      {detailContent}
          
       ) }}const DetailsView = withNavigation(Details);export default DetailsView;复制代码