由于最近要用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 (
<Myapp></Myapp>
)
}
}
然后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 (
<Text style={styles.button} onPress={() => {
this.props.navigation.navigate('b', {key: '传递的标题'})}}>跳转到b</Text>
<Text>Hello world!</Text>
);
}
}
点击文本后跳转到b页面，然后还有传值。
然后b.js页面，如下：
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello b!</Text>
);
}
}
然后没啦，b页面会自动有一个返回的按钮。
然后就实现了页面跳转的功能，然后坑来了，<Myapp></Myapp>，注册到应用时，引入的初始化注册页面的application.js文件，命名不要全小写或大写，一定要首字母大写，也就是不要这样<myapp></myapp>我也不知道为什么，没去查，要不然会大红屏报错。
//页面跳转 第一个参数则是我们在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} ===> //设置滑动返回的距离
网友评论