初始化一个RN项目

react-native init page_framework

page.json

{
"name": "page_framework",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}

引入react-navigation,在项目根目录执行一下命令

yarn add react-navigation

现在的page.json

{
"name": "page_framework",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.47.1",
"react-navigation": "^1.0.0-beta.11"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}

创建项目结构

 在根目录创建src文件夹
在src文件夹下创建root.js
在src文件夹下创建Screens文件夹
在Screens文件夹创建以下文件:home.js/Nearby.js/Message.js/Profile.js/SignIn.js/SignUp.js
在src文件夹下创建styles文件夹
在styles文件夹创建CommonStyles.js文件
在styles文件夹创建index.js文件

修改index.ios.js文件,以component的形式引用Root

import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
import Root from "./src/root" export default class page_framework extends Component {
render() {
return (
<Root />
);
}
} AppRegistry.registerComponent('page_framework', () => page_framework);

修改root.js内容

引用react-navigation库

 import { StackNavigator, TabNavigator } from 'react-navigation';
定义TabNavigator

Tab中定义了4个Tab页,分别是Home, Nearyby, Message, Profile
screen: 后边跟的是component name, navigationOptions是设置tab的参数。
const Tab = TabNavigator(
{
Home:{
screen: Home,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Image
source={require("./resource/icons/pfb_tabbar_homepage.png")}
style={[{tintColor: tintColor}, styles.icon]}
/>
),
}),
},
Nearby:{
screen: Nearby,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Nearby',
tabBarIcon: ({tintColor}) => (
<Image
source={require("./resource/icons/pfb_tabbar_merchant.png")}
style={[{tintColor: tintColor}, styles.icon]}
/>
),
}),
},
Message:{
screen: Message,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Message',
tabBarIcon: ({tintColor}) => (
<Image
source={require("./resource/icons/pfb_tabbar_discover.png")}
style={[{tintColor: tintColor}, styles.icon]}
/>
),
}),
},
Profile:{
screen: Profile,
navigationOptions: ({ navigation }) => ({
tabBarLabel: 'Profile',
tabBarIcon: ({tintColor}) => (
<Image
source={require("./resource/icons/pfb_tabbar_mine.png")}
style={[{tintColor: tintColor}, styles.icon]}
/>
),
}),
},
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
lazy: true,
},
);
定义StackNavigator

整个app由3个页面组成:Tab,SignIn,SignUp。
应用默认打开SignIn页面,
以上页面全部注册到StackNavigator中。
const Navigator = StackNavigator(
{
SignIn: { screen: SignIn },
SignUp: { screen: SignUp },
Tab: { screen: Tab },
},
{
navigationOptions: {
headerBackTitle: null,
headerTintColor: '#333333',
},
},
);

在root中使用Navigator

class Root extends Component{

    render(){
return (
<Navigator />
);
}
}
在SignIn页面跳转到主页(Tab页)

在render中拿到navigation上下文,使用this.props.navigation.navigate()方法跳转到相应页面,参数为注册到StackNavigator中的页面,这里使用Tab。
import React, { PureComponent } from 'react';
import {
View,
Text,
Button,
} from 'react-native';
import { CommonStyles } from "../styles/"; class SignIn extends PureComponent{
static navigationOptions = {
header: null,
};
render(){
return(
<View style={CommonStyles.container}>
<Text style={CommonStyles.welcome}>
this is SignIn page!
</Text>
<Text style={CommonStyles.instructions}>
this is SignIn page!
</Text>
<Text style={CommonStyles.instructions}>
this is SignIn page!
</Text>
<Button title="登录" onPress={() =>
this.props.navigation.navigate('Tab')}
/>
<Button title="注册" onPress={() =>
this.props.navigation.navigate('SignUp')}
/>
</View>
);
}
} export default SignIn; 作者:evanywang
链接:https://www.jianshu.com/p/3a4f769261de
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

react-navigation实现页面框架(转载)的更多相关文章

  1. react navigation goBack()返回到任意页面(不集成redux) 一

    方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...

  2. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  3. 一次掌握 React 与 React Native 两个框架

    此系列文章将整合我的 React 视频教程与 React Native 书籍中的精华部分,给大家介绍 React 与 React Native 结合学习的方法. 1. 软件开发语言与框架的学习本质 我 ...

  4. [RN] 04 - React Navigation

    react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...

  5. react部署之页面空白

    react部署之页面空白 问题:create-react-app build打包后,页面出现空白. 可能一: 控制台报错,js等文件找不到(404) 文件路径问题,只需修改package.json文件 ...

  6. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  7. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  8. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  9. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

随机推荐

  1. Caused by: java.io.FileNotFoundException: class path resource [spring/springmvc.xml] cannot be opene

                        Caused by: java.io.FileNotFoundException: class path resource [spring/springmvc. ...

  2. Vue为v-html中标签添加CSS样式

    在最近的vue项目中遇到的问题:v-html渲染的富文本,无法在样式表中修改样式: <template> <div class="msgHtmlBox" v-ht ...

  3. @RequestParam的使用

    来源:http://825635381.iteye.com/blog/2196911 @RequestParam: 一. 基本使用,获取提交的参数 后端代码: @RequestMapping(&quo ...

  4. vs 编译库文件

    vs编译的库文件 静态库  debug和release版本 需要分开编译,我编译和实践的结果. 但是我也发现有的debug release都用同一个(搞不清楚). 然后添加到工程应用. 静态库  附件 ...

  5. LY.JAVA.DAY12.String类

    2018-07-24 14:06:03 String类概述 字符串是由多个字符组成一串数据(字符序列) 字符串可以看成字符数组 一旦被赋值就不能被改变    值不能变 1.过程概述: 方法区---字符 ...

  6. Linux内核空间内存申请函数kmalloc、kzalloc、vmalloc

    我们都知道在用户空间动态申请内存用的函数是 malloc(),这个函数在各种操作系统上的使用是一致的,对应的用户空间内存释放函数是 free(). 注意:动态申请的内存使用完后必须要释放,否则会造成内 ...

  7. 安装Adobe Acrobat XI Pro

    从网上下载Adobe Acrobat XI Pro这款软件,下载后将其解压到我们的电脑上,然后找到setup.exe双击安装它,安装时选择“使用试用版本或订阅” 2 选择“自定义”   自定义安装组件 ...

  8. cocos2d方块方块

    cGridSize=32 cSceneWidth=8+2 cSceneHeight=18 fuction Grid2Pos(x,y) local visibleSize=cc.Director:get ...

  9. Java:<获取>、<删除>指定文件夹及里面所有文件

    工具类代码如下: 一.获取 public Class Test{ //定义全局变量,存放所有文件夹下的文档 List<String> fileList ; public List<S ...

  10. react与vue的对比

    模板: Vue Vue应用的默认选项是把markup放在HTML文件中. 数据绑定表达式采用的是和Angular相似的mustache语法,而指令(特殊的HTML属性)用来向模板添加功能. React ...