react-native初体验(2) — 认识路由
如果学习止步于 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) — 认识路由的更多相关文章
- spring native 初体验实现 小米控制美的空调
目前关于 spring native 分享的文章还比较少 写这篇文章的主要目前是分享一下自己写的一个 小米控制美的空调 的程序 集成 spring native 过程中碰到的一些问题和解决方法 先放地 ...
- H5、React Native、Native应用对比分析
每日更新关注:http://weibo.com/hanjunqiang 新浪微博!iOS开发者交流QQ群: 446310206 "存在即合理".凡是存在的,都是合乎规律的.任何新 ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- react native 导航路由组件react-navigation的使用
navigation的几个难点和问题: 1.底部tab是否可以加上中间的大按钮? 如果加上,如何触发事件? js文件放哪? 2.navigation的登录注册页面.成功后应该不能返回刚刚的登录页面?清 ...
- 初窥React Native
这两天在学习react native,被虐得布耀布耀的,运行一个hello world花了一天时间(手动捂脸). 由于是跟着官网走,所以一开始便是开发环境的搭建.其他的就不说了(详情见 React N ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- React Native 之TabBarIOS
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native 之 项目实战(一)
前言 本文有配套视频,可以酌情观看. 文中内容因各人理解不同,可能会有所偏差,欢迎朋友们联系我. 文中所有内容仅供学习交流之用,不可用于商业用途,如因此引起的相关法律法规责任,与我无关. 如文中内容对 ...
- React Native在特赞的应用与实践
基于React技术栈构建开发前端项目,并使用React Native开发特赞移动APP 目前正在使用Node.js开发和维护特赞服务网关,希望Node.js能够在更轻量级的微服务架构中发挥重要作用 课 ...
随机推荐
- 在web.xml中配置404错误拦截
<error-page> <error-code>404</error-code> <location>/home.do</location> ...
- Git操作(基础篇)
Git操作(基础篇) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git的读音为/gɪt/.Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常 ...
- Kubernetes-dns 域名解析问题
问题描述:nginx不能解析域名,但是使用nslookup却可以解析域名 ./sbin/nginx -t nginx: [emerg] host not found in upstream " ...
- PHP eval() 函数
定义和用法 eval() 函数把字符串按照 PHP 代码来计算. 该字符串必须是合法的 PHP 代码,且必须以分号结尾. 如果没有在代码字符串中调用 return 语句,则返回 NULL.如果代码中存 ...
- [BJOI2019] 排兵布阵
题目 这个\(dp\)出在普及都算水题吧 直接背包,\(O(nms)\)跑不满,非常稳 #include<cstdio> #include<vector> #include&l ...
- 【洛谷】【堆】P1168 中位数
[题目描述:] 给出一个长度为N的非负整数序列A[i],对于所有1 ≤ k ≤ (N + 1) / 2,输出A[1], A[3], …, A[2k - 1]的中位数.即前1,3,5,……个数的中位数. ...
- Java实现Package编译和访问
Java实现Package编译和访问 说明 所有文件都是使用UTF-8编码来写的,请不要用Windows记事本随便打开 Test.java文件中注释的方法说明了该类是不能访问其方法的 文件目录树 bi ...
- msf提权基础(一)
令牌(token)相当于系统的临时密钥(账号及密码) 加载incognito模块 meterpreter> use incognito meterpreter > list_tokens ...
- Python django 404页面配置和debug=false 静态文件配置 django版本1.10.5
django设置404页面 1.设置settings文件 DEBUG = False ALLOWED_HOSTS = ['127.0.0.1', 'localhost']或者 ALLOWED_HOST ...
- 初识Qt简单动画
Qt提供了类QPropertyAnimation来实现图片的一些简单的动画操作效果. 1.新建一个Qt空项目,同时添加资源文件,并在资源文件中添加图片路径.之后在main.cpp函数中添加以下代码 # ...