react-navigation使用之嵌套和跳转
1. 新版react-native已经将react-navigation作为官方版本发布,基础Demo可以从官方网站获得,比较困扰的问题是组件的嵌套和第二、第三页面的跳转。
2. 组件嵌套问题:
要在父组件定义出指定父组件的router=子组件的router;同时,在子组件赋值navigation属性。
class AllContactsScreen extends React.Component {
render() {return (
<View>
<Text>List of all contacts</Text>
<ItemBlock title="hello world" navigation={this.props.navigation}/>
</View>
);
}
}
AllContactsScreen.router = ItemBlock.router;
在子组件中定义跳转函数,子组件的代码如下:
export default class ItemBlock extends Component{
render(){return(
<View>
<Button
onPress={this.click.bind(this)}
title="Chat with Lily"
/>
</View>
);
}
click(){
const { navigate } = this.props.navigation;
navigate('Chat');
}
}
3. 第二、第三页面的跳转,也是在定义StackNavigator时指定,StackNavigator只定义一次。
const SimpleApp = StackNavigator({
Home: {
screen: MainScreenNavigator,
navigationOptions: {
title: 'My Chats',
},
},
Chat: { screen: ChatScreen },
ChatDetail: {screen: ChatDetail}
})
第二页面的代码如下:
export default class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucifa',
};
render() {
return(
<View>
<Button
onPress={this.click.bind(this)}
title="Chat with Lucky"
/>
</View>
);
}
click(){
const { navigate } = this.props.navigation;
navigate('ChatDetail');
}
}
第三页面就可以随便写了。
以上。
react-navigation使用之嵌套和跳转的更多相关文章
- [RN] 04 - React Navigation
react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...
- Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React-native 导航插件React Navigation 4.x的使用
React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...
- react navigation goBack()返回到任意页面(不集成redux) 一
方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...
- React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- [RN] React Navigation 使用中遇到的显示 问题 汇总
React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d
随机推荐
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- RESTful API接口文档规范小坑
希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 前后端分离的开发模式,假如使用的是基于RESTful API的七层通讯协议,在联调的时候,如何避免配合过程中出现问 ...
- 玩转Spring Cloud之配置中心(config server &config client)
本文内容导航: 一.搭建配置服务中心(config server) 1.1.git方式 1.2.svn方式 1.3.本地文件方式 1.4.解决配置中包含中文内容返回乱码问题 二.搭建配置消费客户端( ...
- k8s集群监控(十一)--技术流ken
Weave Scope 在我之前的docker监控中<Docker容器监控(十)--技术流ken>就已经提到了weave scope. Weave Scope 是 Docker 和 K ...
- (转载)JSON.stringfy()和JSON.parse()的作用
原文链接:https://www.cnblogs.com/shytong/p/4960418.html 一篇详细的介绍和对比,转载自 博客园 “很好玩的博客” 的一片博文,非常感谢他贡献优质文章.
- aspx中的checkbox 取值问题
问题:前台checkbox控件,选中值为1,不选值为0: 解决方案: 插入一行 <input type="hidden" name="RemberPwd" ...
- Vcomputer简介
1.Vcompter存储程序式计算机虚拟机软件简介 Vcompter存储程序式计算机虚拟机软件的文件名为comp_alpha(一般要先安装java运行环境,然后双击该软件即可运行),该软件是桂林电 ...
- SpringCloud Alibaba-nacos注册中心
什么是 Nacos?(https://nacos.io) Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量 ...
- MyBatis基本要素---核心配置文件
今天就简单的叙述下MyBatis的核心配置文件吧~~ configuration 配置 properties 可以配置在java属性配置文件中 settings 修改Mybatis在运行时的行 ...
- Uncaught ReferenceError: jQuery is not defined
页面调试时,明明引入了JQ文件,却一直提示Uncaught ReferenceError: jQuery is not defined错误. 转自:http://blog.csdn.net/baicp ...