React-Native 导航跳转实现与坑

由于最近要用RN写app，就赶紧看看，可是没有那么多时间，就一边看一边写了，所以学的没有那么细很多坑， 先来实现，最后来看看坑吧

运行环境：RN版本0.48以上
使用最新官网推荐的导航器：React Navigation 实现
首先安装：
//进入你项目的根目录下执行
npm install --save react-navigation 或者yarn add react-navigation
新建文件夹a.js，b.js，最终效果是a跳转到b，b里面可以back回来。

react-navigation中我们要用的就是StackNavigator，他可以实现顶部导航栏跳转的效果
首先比较重要的一个概念就是，参与跳转的页面，要全部都在个组件里面注册一下，然后在index.js入口里面注册，因为index.js里面也是直接引入的App.js，所以我们也可以在这里注册到应用程序中(其实就是引入渲染下)，默认会渲染第一个注册的页面。

首先注册我们所有参与导航跳转的页面，在StackNavigator注册。随便建一个js文件，如application.js，如下：
import {
StackNavigator,
} from 'react-navigation';

import React from 'react';

import a from './a';
import b from './b';

/*

• 初始化StackNavigator
  */
  export default App = StackNavigator({
  //默认加载第一个页面，用来注册需要跳转的页面
  a: {
  screen: a,
  },
  b:{
  screen: b,
  }
  });

然后在App.js里面注册到我们的应用里面（因为index.js入口文件直接引入了它并渲染了所以在这里也可以），如下：

import React, { Component } from 'react';
import Myapp from './src/application';

export default class App extends Component {
render(){
return (

)
}

}

然后a.js页面，如下：
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
//设置顶部导航栏的内容
static navigationOptions = ({navigation, screenProps}) => ({
//左侧标题
headerTitle: '我是主页面',
//设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
headerBackTitle: null,
//顶部标题栏的样式
headerStyle: styles.headerStyle,
//顶部标题栏文字的样式
headerTitleStyle: styles.headerTitleStyle,
});
render() {
return (
{
this.props.navigation.navigate('b', {key: '传递的标题'})}}>跳转到b
Hello world!
);
}
}
点击文本后跳转到b页面，然后还有传值。

然后b.js页面，如下：
import React, { Component } from 'react';
import { Text } from 'react-native';

export default class HelloWorldApp extends Component {
render() {
return (
Hello b!
);
}
}
然后没啦，b页面会自动有一个返回的按钮。
然后就实现了页面跳转的功能，然后坑来了，，注册到应用时，引入的初始化注册页面的application.js文件，命名不要全小写或大写，一定要首字母大写，也就是不要这样我也不知道为什么，没去查，要不然会大红屏报错。

//页面跳转 第一个参数则是我们在application.js中注册的页面
//第二个参数则是传递的参数，也可以不传。
this.props.navigation.navigate('Detail', {key: '传递的标题'}

//跳转页面的第二种写法
const {navigate} = this.props.navigation;
navigate('Detail', {key: '传递的参数'});

//没有参数的情况
const {navigate} = this.props.navigation;
navigate('Detail');

获取a页面传递过来的值
navigation.state.params.key //key就是你自己设置的键

导航栏的设置：
headerTitle: '标题' ===> 导航栏的标题
header: null ===> 隐藏导航栏
headerTintColor: 'white' ===> 返回按钮的颜色
headerTitleStyle: {} ===> 导航栏文字的样式
headerStyle: {} ===> 导航栏的样式
headerRight: (< View/>) ===> 设置顶部导航栏友边的视图 和 解决当有返回箭头时，文字不居中
headerLeft: (< View/>) ===> 设置导航栏左边的视图 和 去除返回箭头
headerBackTitle: null ===> 设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题
gestureResponseDistance: {horizontal: 300} ===> //设置滑动返回的距离