注：所用实例及介绍大部分来源官网，本文仅为个人的一次知识梳理
官网地址：https://reactnavigation.org/en/
github网址:https://github.com/react-navigation/react-navigation
React Navigation 是当前使用较火的路由与导航解决方案，也是官方主推的第三方开源。
其特点：1、易于使用 2、兼容iOS和Android 3、完全可定制 4、平台可扩展

1、引入

yarn add react-navigation 或者使用 npm install --save react-navigation

2、使用

2.1，页面路由配置

在React Native中，从App.js导出的组件是应用程序的入口点（或根组件） -- 它处在所有组件的最下层。 与导出 stack navigator 相比，对应用程序根部的组件进行更多的控制通常更有用，所以我们导出一个只渲染了 stack navigator 的组件。（推荐）

const RootStack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
//、、、其他界面注册
});

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

如果路由页面没有其他配置，我们不需要使用{screen：HomeScreen}配置格式，可简写为

const RootStack = createStackNavigator({
  Home: HomeScreen
});

统一页面标题配置，为了清晰期间我定义一个常量做配置如下：

const NvOptions={
    //设置滑动返回的距离
    gestureResponseDistance:{horizontal:300},
   //初始化第一个加载的页面，默认为第一个
    initialRouteName: 'Home',
    //初始页面参数
    // initialRouteParams:{user:'AAAA'},
    navigationOptions: {
        // 背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。
        headerStyle: {backgroundColor:'red'},//标题的样式
        headerTitle:'默认标题',
        headerBackTitle:'返回',//ios返回按钮文字
        headerTintColor:'white', //返回按钮及标题颜色
        headerTitleStyle: {//标题栏文字的样式
            color: 'white',
            fontSize: 16,
            //居中显示，android上不生效，使用  flex: 1, textAlign: 'center',
            // alignSelf: 'center',
            flex: 1,
            textAlign: 'center',
        },
        //返回按钮文字样式
        headerBackTitleStyle:{
            color:'white',
        },
        // 是否支持滑动返回手势，iOS默认支持，安卓默认关闭
        gesturesEnabled:true,
    }
}
const RootStack = createStackNavigator({
  Home: HomeScreen
},NvOptions);
export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

2.2，页面跳转及参数传递获取

//将新路由推送到堆栈导航器，如果它尚未在堆栈中，则跳转到该页面（跳转推荐）
this.props.navigation.navigate('Details',{'params','111'}) //对象参数
//push可多次推送路由，重复添加进堆栈
this.props.navigation.push('Details')
//主动返回上一个界面调用
this.props.navigation.goBack()
//返回堆栈中的第一个页面
this.props.navigation.popToTop()
//获取参数，访问 params 对象，如果未指定参数，则为null。
this.props.navigation.state.params
//获取参数（推荐），params为kay值需对应default value为默认值
this.props.navigation.getParam('params','default value')

那么现在有多页面跳转，该怎么实现呢，官网给出方案，本人未试验，SCREEN_KEY_B是啥，烦请知道的兄台告知下哦 多页面跳转截图

2.3，标题栏配置

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

将传递的参数，作为标题

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('otherParam', 'A Nested Details Screen'),
    };
  };

  /* render function, etc */
}

调整单个页面标题样式，作用相当于上面NvOptions，会覆盖NvOptions样式，NvOptions作用于所有路由界面，下面代码，仅作用于本界面，一般仅设置title，其他由NvOptions统一设置

class HomeScreen extends React.Component {
  static navigationOptions = {
    //header:null,设置header为null,可去除标题
    title: 'Home',
    headerStyle: {//包装标题的View的样式对象,
      backgroundColor: '#f4511e', //标题背景色
    },
    headerTintColor: '#fff', //返回按钮和标题都使用这个属性作为它们的颜色
    headerTitleStyle: { //标题文字样式
      fontWeight: 'bold',
    },
  headerRight: <View/> //占位，防止android,不居中
  };

  /* render function, etc */
}

2.4标题栏添加按钮

1、在navigationOptions中this绑定的不是 HomeScreen 实例，不能使用与this相关的setState等任何方法。
2.有一个社区开发包，用于渲染标题栏中的按钮，并提供正确的样式 react-navigation-header-buttons 。
标题栏和其所属的页面之间的交互实例代码如下，

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
    };
  };
  //1.这里设置参数为方法2.按钮点击事件里面进行获取
  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };
 //标题按钮点击调用的方法
  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}

2.5自定义返回按钮：

您可以使用headerBackTitle和headerTruncatedBackTitle（阅读更多）更改返回按钮旁边显示的文本。
要自定义返回按钮图片，你可以使用 headerBackImage 。
覆盖返回按钮
headerLeft选项接受一个React Component，会覆盖返回按钮及点击事件

2.6 Stack navigator全屏及嵌套（可作用于两种以上风格页面或两个堆栈互不影响的情况）

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,//第一个StackNavigator路由导航
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {//全屏设置
    mode: 'modal',
    headerMode: 'none',
  }
);

（完）