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能够在更轻量级的微服务架构中发挥重要作用 课 ...
随机推荐
- 手动安装gradle
在学习andorid studio时发现编译超级无比的慢,网上有文说是因为gradle的原因,使用离线gradle可以大幅提高编译速度,准备尝试下看看如何.由于gradle的资料都是英文,而我又是英文 ...
- #001 HTML快速入门讲解
整理了下最早开始学习技术的笔记 3W1H学习法? (其他技术同理) What HTML是什么? When 什么时候使用HTML? Why 为什么使用HTMl? HOW 怎么使用HTML ...
- 【C#】#100 调用摄像头
需求:由于项目需要获得用户的头像,所以需要用C#调用摄像头获取头像. 下面写一个调用摄像头的方法 案例:调用摄像头的一个DEMO[效果图] 使用的类库:AForge.dll [Demo下载,Dem ...
- Spring 入门(概述)
1.什么是框架 2.Spring简介 3.IOC(配置.注解) 4.Bean(配置.注解) 5.AOP(配置.注解.AspectJ.API) 资源: http://spring.io/ http:// ...
- 【转】Json判断是否存在某个属性和遍历各个属性和值
var field='uid'; var jsonObj={uid:'001'}; 一. jsonObj[field] != undefined //注意:如果field值正好是undefined那就 ...
- 使用JS获取上一页的url地址
一般来说每个页面上面都有一个返回按钮,用来返回上一页,代码如下: <a href="javascript:history.go(-1)" class="jsBack ...
- ps命令使用详解
转自:http://blog.csdn.net/lsbhjshyn/article/details/18549869 ps:要对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程 ...
- 【转】C++三大特性
又重新看了一个多月的书,也算是基本上了解了一些很基础的东西,学习C++就得掌握它所具备的三大特性. 封装性是基础,继承性是关键,多态性是补充,并且多态性存在于继承的环境中. 封装性 C++语言中支持数 ...
- springboot activiti 整合项目框架源码 shiro 安全框架 druid 数据库连接池
官网:www.fhadmin.org 工作流模块--------------------------------------------------------------------------- ...
- SpringCloud 学习(一) :Features
话不多说,现在在开发微服务项目,也想系统的学习一下SpringCloud,顾选择硬着头皮跟着英文官方文档学习一遍SpringCloud. 现在公司在用SpringCloud,也有很好的实践应用,加上更 ...