如果学习止步于 hello world, 那么人生也太没意思了。这次要做一个看起来真实的应用。多添加几个页面,让他们可以交互,动起来。

react-native 官方推荐使用 react-navigation 作路由管理,下面我将尝试使用他。

根目录下面建立 pages 文件夹,并在里面建立 home.js/user/index.js 两个文件,接下来就可以在这个两个视图之间进行跳转了

mkdir pages
cd pages
touch home.js
mkdir user
cd user
touch index.js

安装路由管理

安装

yarn add react-navigation

引入

// app.js
import { createStackNavigator } from 'react-navigation';

建立路由导航

修改 app.js, 使用 createStackNavigator 创建堆栈卡片式的导航。

import { createStackNavigator } from 'react-navigation';
import Home from './pages/home.js';
import Profile from './pages/user/index.js'; const App = createStackNavigator({
Home: { screen: Home },
Profile: { screen: Profile },
}); export default App

这里建立了两个视图的导航, yarn ios 试一下,报错了,原因是新建的2个视图面还是空的,没有返回一个 react compontent。现在关掉服务,在里面写2个组件。

多个页面

在两个页面里面随便写一些东西,navigationOptions 是路由的配置项,设置后会自动在视图顶部生成一个原生的导航组件。

  • home.js
// home.js
import ...; export default class Home extends React.Component {
static navigationOptions = {
title: '首页',
};
render() {
return (...);
}
} const styles = StyleSheet.create(...);
  • user/index.js
// user/index.js
import ...; export default class Home extends React.Component {
static navigationOptions = {
title: '个人中心',
};
render() {
return (...);
}
} const styles = StyleSheet.create(...);

跳转和返回

从一个页面跳转到另一个页面,需要调用 navigate 方法, 点击 Button, 会在当前视图上叠加 Profile 视图。点击 Profile 上边的返回按钮,会自动返回到 Home 视图。

// home.js
import ...; export default class Home extends React.Component {
static navigationOptions = {
title: '首页',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="去个人中心"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
} const styles = StyleSheet.create(...);

react-native初体验(2) — 认识路由的更多相关文章

  1. spring native 初体验实现 小米控制美的空调

    目前关于 spring native 分享的文章还比较少 写这篇文章的主要目前是分享一下自己写的一个 小米控制美的空调 的程序 集成 spring native 过程中碰到的一些问题和解决方法 先放地 ...

  2. H5、React Native、Native应用对比分析

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...

  3. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  4. react native 导航路由组件react-navigation的使用

    navigation的几个难点和问题: 1.底部tab是否可以加上中间的大按钮? 如果加上,如何触发事件? js文件放哪? 2.navigation的登录注册页面.成功后应该不能返回刚刚的登录页面?清 ...

  5. 初窥React Native

    这两天在学习react native,被虐得布耀布耀的,运行一个hello world花了一天时间(手动捂脸). 由于是跟着官网走,所以一开始便是开发环境的搭建.其他的就不说了(详情见 React N ...

  6. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. React Native 之TabBarIOS

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  8. React Native 之 项目实战(一)

    前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...

  9. React Native在特赞的应用与实践

    基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP 目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用 课 ...

随机推荐

  1. 在web.xml中配置404错误拦截

    <error-page> <error-code>404</error-code> <location>/home.do</location> ...

  2. Git操作(基础篇)

    Git操作(基础篇) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git的读音为/gɪt/.Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常 ...

  3. Kubernetes-dns 域名解析问题

    问题描述:nginx不能解析域名,但是使用nslookup却可以解析域名 ./sbin/nginx -t nginx: [emerg] host not found in upstream " ...

  4. PHP eval() 函数

    定义和用法 eval() 函数把字符串按照 PHP 代码来计算. 该字符串必须是合法的 PHP 代码,且必须以分号结尾. 如果没有在代码字符串中调用 return 语句,则返回 NULL.如果代码中存 ...

  5. [BJOI2019] 排兵布阵

    题目 这个\(dp\)出在普及都算水题吧 直接背包,\(O(nms)\)跑不满,非常稳 #include<cstdio> #include<vector> #include&l ...

  6. 【洛谷】【堆】P1168 中位数

    [题目描述:] 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1,3,5,……个数的中位数. ...

  7. Java实现Package编译和访问

    Java实现Package编译和访问 说明 所有文件都是使用UTF-8编码来写的,请不要用Windows记事本随便打开 Test.java文件中注释的方法说明了该类是不能访问其方法的 文件目录树 bi ...

  8. msf提权基础(一)

    令牌(token)相当于系统的临时密钥(账号及密码) 加载incognito模块 meterpreter> use incognito meterpreter > list_tokens ...

  9. Python django 404页面配置和debug=false 静态文件配置 django版本1.10.5

    django设置404页面 1.设置settings文件 DEBUG = False ALLOWED_HOSTS = ['127.0.0.1', 'localhost']或者 ALLOWED_HOST ...

  10. 初识Qt简单动画

    Qt提供了类QPropertyAnimation来实现图片的一些简单的动画操作效果. 1.新建一个Qt空项目,同时添加资源文件,并在资源文件中添加图片路径.之后在main.cpp函数中添加以下代码 # ...