版权声明:请通知博主([email protected])获取允许后进行分享。 https://blog.csdn.net/qq934235475/article/details/85601875
之前项目一直用的老版本的React-native(0.35.0),新的导航组件一直没有接触,近来想接触,但是找了半天却发现都实现不了,后来终于折腾好了,所以记录一下。
谈组件不写清楚版本完全就是耍流氓!
谈组件不写清楚版本完全就是耍流氓!
谈组件不写清楚版本完全就是耍流氓!
恶心的事儿说三遍!
我所使用的 react-native,react-navigation以及所需react-native-gesture-handler版本(非常终于,各版本均不一样):
"react-native": "^0.53.0",
"react-navigation": "^2.9.1",
"react-native-gesture-handler": "^1.0.9"
流程步骤:
1,安装控件。
2,主界面入口配置。
3,跳转页面。
一,安装控件
npm install react-native-gesture-handler@^1.0.9
npm install react-navigation@^2.9.1
二,主界面入口配置
项目结构:
主界面入口配置:
/**
* Created by supervons on 2018/12/20.
* 入口界面,控制路由
* app entrance interface page
*/
import React, {Component} from 'react';
import {createStackNavigator} from "react-navigation";
import LoginPage from './commonPage/Login/loginPage'
import MainPage from './commonPage/MainPage';
import SignBoardView from './commonPage/SignTest/signBoardView';
import PersonalCenter from './commonPage/personalCenter/personalCenter';
const RootStack = createStackNavigator({
Login: { //登录界面
screen: LoginPage
},
MainPage: { //主界面
screen: MainPage
},
PersonalCenter: { //我的(个人中心)
screen: PersonalCenter
},
SignBoardView: { //手写签名页面
screen: SignBoardView
},
},
{//定义配置
initialRouteName: 'Login', //设置初始路由为登录界面
navigationOptions: { //导航栏通用设置
headerStyle: {
backgroundColor: '#7276ff',
},
}
}
)
export default class App extends Component {
render() {
return (
<RootStack/>
)
}
}
三,跳转页面
使用如下即可替换当前页面,不能返回的,可用于登录。
this.props.navigation.replace('MainPage');
使用如下即可跳转页面(页面需在入口文件中注册)。
this.props.navigation.push('MainPage');
项目示例gitHub:https://github.com/supervons/commonProject