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. [SpringBoot guides系列翻译]通过JDBC和Spring访问关系数据库

    原文 参考链接 hikaricp Spring Boot JDBC Starter Spring Boot Starter Parent h2 database introduction Autowi ...

  2. C# 30分钟完成百度人脸识别——进阶篇(文末附源码)

    距离上次入门篇时隔两个月才出这进阶篇,小编惭愧,对不住关注我的卡哇伊的小伙伴们,为此小编用这篇博来谢罪. 前面的准备工作我就不说了,注册百度账号api,创建web网站项目,引入动态链接库引入. 不了解 ...

  3. [转]Date and String Function in BluePrism

    本文转自:https://www.codeproject.com/Articles/1247389/Date-and-String-Function-in-BluePrism This article ...

  4. HttpClient封装方法

    //post请求 public static string PostRequest(string url, HttpContent data) { var handler = new HttpClie ...

  5. Netty中的Channel之数据冲刷与线程安全(writeAndFlush)

    本文首发于本博客,如需转载,请申明出处. GitHub项目地址 InChat 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架 前言 本文预设读者已经了解了一定的Netty基础知 ...

  6. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  7. Android视频录制从不入门到入门系列教程(二)————显示视频图像

    1.创建一个空的工程,注意声明下列权限: <uses-permission android:name="android.permission.CAMERA"/> < ...

  8. 【English】十二、英语句子种类,陈述句、疑问句、祈使句、感叹句

    一.英语句子按照用途可以分为4类 种类.用途.例句 陈述句 用于说明事实或说话人的看法(事实不就是别人发起并被同意的看法) My name is Jennt Green. I like him bec ...

  9. ORA-04030: out of process memory when trying to allocate 152 bytes (Logminer LCR c,krvtadc)

    今天使用LogMiner找回误更新的数据时,查询v$logmnr_contents时,遇到了"ORA-04030: out of process memory when trying to ...

  10. 抓包工具Charles安装时需要注意的地方

    最新接到一个任务,需要为app端的升级提供新的接口.以前没有搞过这个,其实搞完之后也就那样!其中有很重要的一点,就是需要用到抓包工具,进行联调测试,观看app端的数据情况. 抓包工具最常用的两个:fi ...