混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路
最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写!
还是先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (最近还是保持日更,除非忙的起飞活着出去玩不然都是更的,不信你看)
废话不多,贴下运行效果
登陆前
登录成功后
部分代码借鉴:https://github.com/SpikeKing/WclNavigator
rn的页面跳转都是交由Navigator来处理,我们看下文档了解这个常用的组件Navigator
Navigator 实质上是调用的Native的任务栈通过一系列路由做推送跳转等逻辑的,所以调的还是源生内容。
他有非常多实用的回调函数,注入renderScene configureScene 等等等
Navigator正常运行需要以下几个步骤
1.初始化路由 —>initialRoute
2.配置跳转动画 —>configureScene
3.渲染场景 —>renderScene
代码是最好的注解,我们直接边看代码边解释,先是index.android.js
为了让逻辑更清晰我们把之前登录的代码 放到了login.android.js
index页面专心做”配置”
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity
} from 'react-native';
import Button from 'react-native-button'
import Login from './pages/login.android';
export default class WjjPro extends Component {
/**
* 使用动态页面加载
* @param route 路由
* @param navigator 导航器
* @returns {XML} 页面
*/
renderScene(route, navigator) {
return <route.component navigator={navigator} {...route.passProps} />;
}
/**
* 配置场景动画
* @param route 路由
* @param routeStack 路由栈
* @returns {*} 动画
*/
configureScene(route, routeStack) {
if (route.type == 'Bottom') {
return Navigator.SceneConfigs.FloatFromBottom; // 底部弹出
}
return Navigator.SceneConfigs.PushFromRight; // 右侧弹出
}
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{component: Login}}
configureScene={this.configureScene}
renderScene={this.renderScene}/>
);
}
}
const styles = StyleSheet.create({
});
AppRegistry.registerComponent('WjjPro', () => WjjPro);
因为我们首页实质上不做展示而是直接跳转到login页面,所以我们先配置Navigator,初始化各个函数,然后推给Login这个我们在开始就定义的”组件”,这部分如何实现跳转的可以看知识传送门,写得很详细,我没必要再画蛇添足了
ndex其实就是做了一堆配置然后就传递给login了,但是他做了一个很重要的行为,构造了Navigator属性,然后后续的页面进行传递
登录页面
登录页面和上一个例子里的代码没什么区别,主要差异就是再判断表单之后进行跳转页面,代码如下
name是我们我们要跳转页面传给下一个页面的参数
它可以在 this.props.name得到我们login页面传递过去的值
type是我们跳转的动画效果,对应的找Navigator的configureScene方法
文件头也要申明我们下一个被跳转的组件
import Main from './main.android';
_jump(name, type = 'Normal') {
this.props.navigator.push({
component: Main,
passProps: {
name: name
},
type: type
})
}
push类似于 我们平时的startActivity的行为,API介绍可以看http://facebook.github.io/react-native/docs/navigator.html
登陆成功了那就跳到了我们的首页
import React, {Component,Navigator} from 'react';
import {AppRegistry, View, StyleSheet, Text,} from 'react-native';
export default class Main extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
}
}
componentDidMount() {
this.setState({name: this.props.name});
}
render() {
return (
<View>
<Text>获得的参数: value = {this.state.name}</Text>
</View>
);
}
}
AppRegistry.registerComponent('Main', () => Main);
我们在首页的componentDidMount方法里把传来的参数给Main页面的name字段赋值,然后呈现在Text上就行了
总结:
这是个很强大的控件,可用于页面跳转。
要是用只需要
1.构造Navigator
2.配置Navigator结合业务逻辑
3.调用push,jump等方法进行跳转
混合开发的大趋势之一React Native之页面跳转的更多相关文章
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- 混合开发的大趋势之一React Native之简单的登录界面
转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路 最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补. 话不多说先安利:htt ...
- 混合开发的大趋势之一React Native之Image (脑动理解)
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...
- react native 之页面跳转
第一章 跳转的实现 1.component 中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
随机推荐
- Code Forces 645A Amity Assessment
A. Amity Assessment time limit per test2 seconds memory limit per test256 megabytes inputstandard in ...
- 2017 Multi-University Training Contest - Team 4——HDU6069&&Counting Divisors
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6069 题目意思:首先解释一下d[n]这个函数表示n有多少个因子,百度一下可以知道这个函数是一个非完全积 ...
- 微信openid的单脚本获取 将 header 至自身,但是reques参数不同,响应也不同-----“单脚本APP”
w 0-目的是封装成一个类.方法,方便在不同入口下,比如不是在微信公众号内而是在他人分享的url,获取opeid,且便于路由控制,将路由控制交给且仅交给codeigniter; 1-任何一个网站都可以 ...
- requests设置Authorization
headers = {"Authorization", "Bearer {}".format(token_string)} r = requests.get(& ...
- hotspot的简单介绍
慢慢开始深入了解java,才知道java虚拟机有很多种,其中最为知名的应该就是hotspot了,接下来是hotspot的一点简单介绍. 没错,Java是解释语言,但并不意味着它一定被解释执行.早期 的 ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- iOS开发- 速学Swift-中文概述
Swift是什么? Swift是苹果于WWDC 2014公布的编程语言,这里引用The Swift Programming Language的原话: Swift is a new programmin ...
- 永远也记不住的linux环境变量,库文件,头文件,交叉编译...
一.环境变量1.node-v4.9.1-linux-armv7l1)安装cp node-v4.9.1-linux-armv7l.tar.gz /usr/local/cd /usr/local/tar ...
- Linux安装Java开发环境
一.JDK安装 安装JDK的实现步骤(使用root用户登录安装,避免需要对文件授权) (1)下载JDK,JDK的存放目录一般存放于 /opt目录下(Oracle官网下载jdk,需要accept lic ...
- RF是如何工作的?
随机森林的发展史 谈及随机森林算法的产生与发展,我们必须回溯到20世纪80年代.可以说,该算法是Leo Breiman, Adele Cutler, Ho Tin Kam, Dietterich, A ...