React Navigation的简单使用（一）

说明：从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中，而且官方推荐使用React Navigation导航组件，这个已经默认为官方推荐了。

1.StackNavigator导航

这就是一般的导航器，默认情况下，StackNavigator配置为具有熟悉的iOS和Android外观：iOS上的新屏幕从右侧滑出，从Android的底部渐隐，在iOS上，StackNavigator也可以配置为模式样式，屏幕从底部滑入。写这篇文章的时候，我还没有找到在安卓设备上改变进出动画的配置。

使用介绍：

在入口文件处定义：这里简化了文件间的依赖关系。

import {StackNavigator} from 'react-navigation';

import Home from './test/Home';
import Page from './test/Page';

const gewdDemo01 = StackNavigator({
        Home: {screen: Home},
        Page: {screen: Page}
    },{
        initialRouteName: 'Home', // 默认显示界面
    }
);


AppRegistry.registerComponent('gewdDemo01', () => gewdDemo01);

这样的话，是默认加上官方的导航栏效果的，如果想去掉的话，可以设置为：

const gewdDemo01 = StackNavigator({
        Home: {screen: Home},
        Page: {screen: Page}
    },{
        initialRouteName: 'Home', // 默认显示界面
        headerMode: 'none'
    }
);

导航整体配置列表：

• initialRouteName：设置堆栈的默认页面
• initialRouteParams：初始路由的参数
• navigationOptions： 屏幕导航的默认选项
• paths：route config里面路径设置的映射
• mode：定义渲染和转换的样式
  1.card：使用标准的iOS和Android屏幕转换。这是默认值。
  2.modal：使屏幕从底部滑入，这是一种常见的iOS模式。
  只适用于iOS，对Android无影响
• headerMode：指定标题应如何呈现
  1.float：渲染一个保持在顶部的标题，并在屏幕更改时显示动画。
  这是iOS上的常见模式
  2.screen：每个屏幕都有一个标题，标题与屏幕一起淡入淡出。
  这是Android上的常见模式
  3.none：不会显示标题
• cardStyle：使用此支路覆盖或扩展堆叠中单个卡的默认样式
• transitionConfig：返回覆盖默认屏幕转换的对象的函数
• onTransitionStart：当路由转换动画即将开始时被调用的功能
• onTransitionEnd：一旦转换动画完成，将被调用的功能

查看Home文件：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class Home extends Component {
  static navigationOptions = {
    title: 'Home',
  }

  constructor(props){
    super(props);

  }

  gotoPage(){
    const {navigate} = this.props.navigation;
    navigate('Page',{
      user:'Page'
    });
  }

  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
        <Text>Home</Text>

        <View style={{width:100,height:40,backgroundColor:'red',justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#fff'}} onPress={()=>{this.gotoPage()}}>点击跳转</Text>
        </View>
      </View>
    );
  }
}

分析gotoPage方法，navigate('组件名称')，意思是跳转到相应的页面，这是在上面的入口文件中定义好的，我们只需要传递即可，并且要加引号。后面的{}里的内容是传递的参数，在Page页面中我们可以通过如下代码拿到他们：

componentDidMount() {
    // 传参
    const {params} = this.props.navigation.state;
    console.log(params.user);
  }

查看Page页面：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class Page extends Component {
  static navigationOptions = ({navigation}) => {
        return {
          title:`Hello ${navigation.state.params.user}`,
          headerStyle:{
            backgroundColor:'pink'  // 导航条样式
          },
          headerTintColor:'blue' // 标题文字颜色
        }
  }


  constructor(props){
    super(props);
  }

  gobackToHome(){
    // 返回
    this.props.navigation.goBack()
  }
  componentDidMount() {
    // 传参
    const {params} = this.props.navigation.state;
    console.log(params.id);
  }
  render() {
    return (
      <View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#888888'}}>
        <Text>Page</Text>
        <View style={{width:100,height:40,backgroundColor:'green',justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#fff'}} onPress={()=>{this.gobackToHome()}}>返回</Text>
        </View>
      </View>
    );
  }
}

默认的返回是在导航条上的箭头按钮，并且返回键退出也已经封装好了。

navigationOptions是对导航部分的配置项，注意写法，这种写法是比较实用的，因为可以拿到父组件传过来的参数作为标题的一部分显示，而且不影响配置项的设置。

配置项有很多，详细请看如下列表：

• title: 标题显示
• header：可以返回一个组件进行显示,当然也可以不让这个组件展示标题，还是很灵活的
• headerTitle：组件标题
• headerBackTitle：iOS上的后退按钮使用的标题字符串
• headerTruncatedBackTitle：当headerBackTitle不适合屏幕时，返回按钮使用的标题字符串。
  默认情况下为“返回”
• headerRight：标题的右侧的显示元素
• headerLeft：标题的左侧的显示元素
• headerStyle：标题栏的样式
• headerTitleStyle：标题栏title的样式
• headerBackTitleStyle：返回元素的样式
• headerTintColor：标题颜色
• headerPressColorAndroid：颜色纹理（Android> = 5.0）
• gesturesEnabled：是否可以使用手势关闭此屏幕。
  在iOS上默认为true，Android上为false

演示效果如图：

router.gif