基于React Native和Ethers.js的电子钱包（二）：路由和导航-CSDN博客

导航，即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(
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
       <Text>This is
Account!</Text>
     </View>
   )
 }
}复制代码

接着，写主文件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(
      <HomeContainer/>
    )
  }
}

class FriendsScreen extends React.Component {
  render(){
    return(
      <Friends/>
    )
  }
}

class AccountScreen extends React.Component {
  render(){
    return(
      <Account/>
    )
  }
}复制代码

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(
     <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
       <Text>This is
Home!</Text>
       <Button title='Go to Details' onPress={() => this.props.navigation.navigate('Details')}/>
     </View>
   )
 }
}

class DetailsScreen extends React.Component {
  render() {
    return(
      <Details/>
    )
  }
}
const HomeNav = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  }
)

const HomeContainer = createAppContainer(HomeNav);

export default HomeContainer;复制代码

这时的效果图是这样的：

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

对象没定义？

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(
      <HomeView/>
    )
  }
}

class DetailsViewScreen extends React.Component {
  render(){
    return(
      <DetailsView/>
    )
  }
}

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(
     <View style={{flex: 1,
alignItems: 'center', justifyContent: 'center'}}>
       <Text>This is
Home!</Text>
       <Button title='Go to
Details'
         onPress={() => this.props.navigation.navigate('DetailsView',
{content: 'This is Detail!'})}/> 
//onPress事件触发navigation，导航到DetailsView页面
     </View>
   )
 }
}

const HomeView = withNavigation(HomeScreen);

export default HomeView;复制代码

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(
     <View style={{flex: 1,
alignItems: 'center', justifyContent: 'center'}}>
      
<Text>{detailContent}</Text>
     </View>
   )
 }
}

const DetailsView = withNavigation(Details);

export default DetailsView;

复制代码