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使用之嵌套和跳转的更多相关文章

  1. [RN] 04 - React Navigation

    react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...

  2. Facebook力推导航库:React Navigation使用详解

    本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍 今年1月份,新开源的react- ...

  3. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  4. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  5. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  6. react navigation goBack()返回到任意页面(不集成redux) 一

    方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...

  7. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

  8. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  9. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  10. [RN] React Navigation 使用中遇到的显示 问题 汇总

    React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d

随机推荐

  1. Angular动态创建组件之Portals

    这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...

  2. RESTful API接口文档规范小坑

    希望给你3-5分钟的碎片化学习,可能是坐地铁.等公交,积少成多,水滴石穿,谢谢关注. 前后端分离的开发模式,假如使用的是基于RESTful API的七层通讯协议,在联调的时候,如何避免配合过程中出现问 ...

  3. 玩转Spring Cloud之配置中心(config server &config client)

     本文内容导航: 一.搭建配置服务中心(config server) 1.1.git方式 1.2.svn方式 1.3.本地文件方式 1.4.解决配置中包含中文内容返回乱码问题 二.搭建配置消费客户端( ...

  4. k8s集群监控(十一)--技术流ken

    Weave Scope   在我之前的docker监控中<Docker容器监控(十)--技术流ken>就已经提到了weave scope. Weave Scope 是 Docker 和 K ...

  5. (转载)JSON.stringfy()和JSON.parse()的作用

    原文链接:https://www.cnblogs.com/shytong/p/4960418.html 一篇详细的介绍和对比,转载自 博客园 “很好玩的博客” 的一片博文,非常感谢他贡献优质文章.

  6. aspx中的checkbox 取值问题

    问题:前台checkbox控件,选中值为1,不选值为0: 解决方案: 插入一行 <input type="hidden" name="RemberPwd" ...

  7. Vcomputer简介

    1.Vcompter存储程序式计算机虚拟机软件简介   Vcompter存储程序式计算机虚拟机软件的文件名为comp_alpha(一般要先安装java运行环境,然后双击该软件即可运行),该软件是桂林电 ...

  8. SpringCloud Alibaba-nacos注册中心

    什么是 Nacos?(https://nacos.io) Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量 ...

  9. MyBatis基本要素---核心配置文件

    今天就简单的叙述下MyBatis的核心配置文件吧~~ configuration  配置 properties  可以配置在java属性配置文件中 settings   修改Mybatis在运行时的行 ...

  10. Uncaught ReferenceError: jQuery is not defined

    页面调试时,明明引入了JQ文件,却一直提示Uncaught ReferenceError: jQuery is not defined错误. 转自:http://blog.csdn.net/baicp ...