React Navigation的集成及使用

2019-08-01 本文已影响6人 wenny826

一.简介
二.安装集成
三.基本用法及常用属性
四.常用几种导航器的简单示例及混合使用

一.简介

React Navigation 为React native提供了一个类似web浏览器一样的内置历史堆栈,React Navigation 的 stack navigator 为应用提供了一种在屏幕之间切换并管理导航历史记录的方式。当用户与它进行交互时，应用程序会从导航堆栈中新增和删除页面，这会导致用户看到不同的页面。除此之外，还提供了在堆栈中的路由之间切换的手势和动画。

二.安装集成

1.在react native项目中安装react-navigation包

$ yarn add react-navigation
# or with npm
# npm install react-navigation

2.安装react-native-gesture-handler

$ yarn add react-native-gesture-handler
# or with npm
# npm install react-native-gesture-handler

3.进行关联

$ react-native link react-native-gesture-handler

在Android中，关联后会自动如下添加代码。
3.1 app的build.gridle中

    implementation project(':react-native-gesture-handler')

3.2 继承了ReactApplication的 MainApplication中

image.png
当出现关联失败，项目报红时，注意检查以上代码是否被添加，没有可手动添加。
4.在对应的继承了ReactActivity的activity添加以下代码

image.png

注意：进行关联的过程中可能会出现as报错，关联失败，可Rebuild项目，或者重新link。

$ react-native unlink react-native-gesture-handler //取消关联
$ react-native link react-native-gesture-handler //重新关联

三.基本用法及常用属性

1.创建导航器

以createStackNavigator为示例

const taskNavigator = createStackNavigator({
    test1:TestScreen1,
    test2:TestScreen2
})

createStackNavigator是一个返回 React 组件的方法,因此我们可以直接从App.js中导出它以用作我们应用程序的根组件
App.js

const AppContainer = createAppContainer(taskNavigator);

export default class App extends Component {
  render() {
    return <AppContainer />;
  }
}

2.页面切换

this.props.navigation.navigate('test1'):首先尝试查找具有该名称的现有路由, 并且只有在堆栈上没有一个新路由时才会推送该路由。
this.props.navigation.push('test1'): 向导航堆栈中添加新路由
this.props.navigation.goBack(): 返回上一个页面
this.props.navigation.popToTop(): 返回堆栈中的第一个页面

3.React Navigation 生命周期

image.png
图片来源
react-native 生命周期文章内

4.React Navigation 路由传参

navigation.navigate('routeName',{paramName:paramValue,...}):传递参数
navigation.getParam(paramName,defaultValue)：获取参数

5.StackNavigatorConfig导航器配置

initialRouteName: 设置 stack navigator 的默认页面，必须是路由配置中的某一个
initialRouteParams: 初始路由的参数
initialRouteKey: 初始路由的可选标识符
paths: 覆盖路由配置中设置的路径的映射
mode: 定义渲染和转换的样式,card使用标准的 iOS 和 Android 屏幕转换，这是默认设置。modal页面从屏幕底部滑入，这是iOS的常用模式，只在 iOS 上生效，在 Android 上无效
navigationOptions: 导航器本身的导航选项，用于配置父导航器

6.用于导航器内部页面的navigationOptions

title:标题
header:返回一个 React 元素的函数，将作为一个标题来显示。设为 null ，则隐藏标题。
headerTitle:Header 使用的字符串，React 元素或React组件。默认是页面的 title 当一个组件被使用时，它会接受 allowFontScaling、 style 和 children 这几个 props。标题字符串在children中传递。
headerTitleAllowFontScaling:AllowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
headerBackAllowFontScaling:后退按钮标题字体是否应缩放以符合文本大小辅助功能设置。默认为false。
headerBackImage:自定义后退按钮显示图片
headerBackTitle:Ios 上的后退按钮使用的标题字符串
headerRight:在标题栏右侧展示的 React 组件。
headerLeft:在标题栏左侧展示的 React 元素或组件
headerStyle:标题的样式对象
params:在路由定义内提供默认参数

四.常用几种导航器的简单示例及混合使用

createStackNavigator 最常见的导航器，一次渲染一个页面，并支持页面切换，当我们打开一个新的页面时，该页面会被置于堆栈的顶层。
示例：

//创建了一个导航器，里面含有命名为test1，test2的两个Component组件
const taskNavigator = createStackNavigator({
    test1:TestScreen1,
    test2:TestScreen2
})

const AppContainer = createAppContainer(taskNavigator);

export default class App extends Component {
  render() {
    return <AppContainer />;
  }
}

TestScreen1

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button} from 'react-native';

export default class TestScreen1 extends Component {
    static navigationOptions = {
      title: '第一个界面',
      headerLayoutPreset: "center",
      headerTitleStyle: {
        fontWeight: 'normal',
        fontSize: 16,
        flex: 1,
        textAlign: 'center'
      },
      headerStyle: {
        backgroundColor: 'white',
        elevation: 5,
      },
    };
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>第一个界面!</Text>
            <Button onPress = { () =>{
                this.props.navigation.navigate('test2')
            }}
            title = "进入第二个界面"/>
          </View>
        );
      }
    }

TestScreen2

export default class TestScreen2 extends Component {
    static navigationOptions = {
      title: '第二个界面',
      headerTitleStyle: {
        fontWeight: 'normal',
        fontSize: 16,
        flex: 1,
        textAlign: 'center',
      },
      headerStyle: {
        backgroundColor: 'white',
        elevation: 5,
      },
      headerRight: <View />
    };
      render() {
        return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>第二个界面!</Text>
          </View>
        );
      }
    }

20190727_152847.gif

createBottomTabNavigator 渲染一个 tab bar，让用户可以在多个页面之间切换。
示例，本示例中运用了两种导航器的结合，BottomTabNavigator的每一个item都是一个StackNavigator
App.js

const TabNavigator = createBottomTabNavigator({
  "首页" : {
    screen : createStackNavigator({
      screen:HomeScreen,
    }),
    navigationOptions :{
      tabBarIcon :({ focused, tintColor }) =>{
        if(focused) {
          return <Image source = {require ('./icon/7_home_yes.png')} style = {{width: 30 , height : 30}}/>
        } else{
          return <Image source = {require ('./icon/7_home_no.png')} style = {{width: 30 , height : 30}}></Image>
        }
      }
    },
  },
  "发现":{
    screen : createStackNavigator({
      screen:FindScreen,
    }),
    navigationOptions :{
      tabBarIcon :({ focused, tintColor }) =>{
        if(focused) {
          return <Image source = {require ('./icon/7_find_yes.png')} style = {{width: 30 , height : 30}}></Image>
        } else{
          return <Image source = {require ('./icon/7_find_no.png')} style = {{width: 30 , height : 30}}></Image>
        }
      },
    }
  },
  "我的":{
    screen : createStackNavigator({
      screen:MeScreen,
    }),
    navigationOptions :{
      tabBarIcon :({ focused, tintColor }) =>{
        if(focused) {
          return <Image source = {require ('./icon/7_find_yes.png')} style = {{width: 30 , height : 30}}></Image>
        } else{
          return <Image source = {require ('./icon/7_find_no.png')} style = {{width: 30 , height : 30}}></Image>
        }
      },
    }
  },
},{
  initialRouteName: '首页',
  tabBarOptions:{
      backBehavior:"none",
      inactiveTintColor:"#cbd0dc",
      activeTintColor :"#007aff", 
      showIcon: true,
    },
},)
const AppContainer = createAppContainer(TabNavigator);

export default class App extends Component {
  render() {
    return <AppContainer />;
  }
}

20190727_171912.gif

createSwitchNavigator一次只显示一个页面。默认情况下，它不处理返回操作，并在你切换时将路由重置为默认状态
将createStackNavigator的示例中的createStackNavigator改成createSwitchNavigator

const taskNavigator = createSwitchNavigator({
    test1:TestScreen1,
    test2:TestScreen2
})
const AppContainer = createAppContainer(taskNavigator);

export default class App extends Component {
  render() {
    return <AppContainer />;
  }

效果变成如下：

20190727_180030.gif
第二个界面的返回键没有了，并且按下返回键时不会回到第一个界面，而是直接回退到进入taskNavigator栈之前的页面

createDrawerNavigator - 提供从左侧滑入的抽屉。

打开侧边栏：navigation.openDrawer()

关闭侧边栏：navigation.closeDrawer()

切换侧边栏：navigation.toggleDrawer()

示例：
本示例将StackNavigator,BottomTabNavigator,DrawerNavigator三种导航器结合使用

createDrawerNavigator

const drawerNavigator = createDrawerNavigator({
  home: TabNavigator,
  test1: taskNavigator,
  test3: {
    screen: TestScreen3,
    navigationOptions: {
      drawerLabel: 'test3',
      drawerIcon: ({ focused, tintColor }) => {
        if (focused) {
          return <Image source={require('./icon/7_find_yes.png')} style={{ width: 30, height: 30 }}></Image>
        } else {
          return <Image source={require('./icon/7_find_no.png')} style={{ width: 30, height: 30 }}></Image>
        }
      }
    }
  },
  test4: TestScreen4
}, {
    drawerWidth: 200,
    drawerPosition: "left",
    initialRouteName: "home",
    contentOptions: {
      activeTintColor: "red",
      inactiveTintColor: "blue"
    },
    contentComponent: (props) => (
      <ScrollView>
        <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
          <Text >top</Text>
          <DrawerItems {...props} />
          <Text >bottom</Text>
        </SafeAreaView>
      </ScrollView>
    )
  })

home为上面creatBottomTabNavigator示例;
test1为上面的createStackNavigator示例；
给test3菜单栏添加了一个icon；
自定义了一个contentComponent,抽屉的默认组件是可滚动的，只包含 RouteConfig 中路由的链接。现给抽屉添加了一个顶部text和底部text；
在contentOptions中设置了DrawerItems的选中和未选中颜色
效果图：

20190731_163122.gif