React Native中Navigator的安装与使用
一、安装Navigator
1.安装react-native-deprecated-custom-components
npm install react-native-deprecated-custom-components --save
2.若npm安装报错,则执行下面命令
npm i react-native-deprecated-custom-components --save
3.若还未解决则使用yarn命令(前提是自己有yarn的配置环境)
yarn add react-native-deprecated-custom-components --save
二、使用Navigator
说明:本demo为男生给女生送一枝玫瑰,女生回赠巧克力。包含了父子组件的通信
1.引入Navigator
import {Navigator} from "react-native-deprecated-custom-components"
2.页面A(用于放置父组件Boy和子组件Girl):
<Navigator
initialRoute={{
//Boy为默认显示组件
component: Boy
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component navigator={navigator} {...route.params}/>
}}
></Navigator>
3.父组件Boy(父组件):
<View style={styles.container}>
<Text style={styles.text}>I am Boy</Text>
<Text
style={styles.text}
onPress={
()=>{
this.props.navigator.push({
component:Girl,
params:{
word:'一枝玫瑰',
onCallBack:(word)=>{
this.setState({
word:word
})
}
}
})
}
}
>送女孩一支玫瑰</Text>
<Text style={styles.text}>{this.state.word}</Text>
</View>
4.子组件Girl(子组件):
<View style={styles.container}>
<Text style={styles.text}>
I am Girl.
</Text>
<Text style={styles.text}>
我收到了男孩送的玫瑰{this.props.word}
</Text>
<Text
style={styles.text}
onPress={
()=>{
this.props.onCallBack('一盒巧克力');
//删除组件
this.props.navigator.pop()
}
}
>
回赠巧克力
</Text>
</View>
React Native中Navigator的安装与使用的更多相关文章
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- React Native导航器Navigator
React Native导航器Navigator 使用导航器可以让你在应用的不同场景(页面)间进行切换.导航器通过路由对象来分辨不同的场景.利用renderScene方法,导航栏可以根据指定的路由来渲 ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- react native中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
随机推荐
- shell数组处理
linux shell在编程方面比windows 批处理强大太多,无论是在循环.运算.已经数据类型方面都是不能比较的. 下面是个人在使用时候,对它在数组方面一些操作进行的总结. 1.数组定义 ...
- c#中,点击一个菜单项后调用exe文件
using System.Diagnostics; private void 导出数据ToolStripMenuItem_Click(object sender, EventArgs e) { Pro ...
- java——多线程并发库
JDK5中增加了Doug Lea的并发库,这一引进给Java线程的管理和使用提供了强大的便利性. java.util.current包中提供了对线程优化.管理的各项操作,使得线程的使用变得的心应手.该 ...
- YOLO---YOLOv3 with OpenCV安装与使用
Yolo v3+Opencv3.4.2安装记录 @wp20180930 目录 一.环境要求 (1)python版本的查看 (2)opencv版本的查看 二.文件下载 三.数据自测 四.问题与解决 (1 ...
- RxJava事件流变换者--操作符
对于Rxjava来说,操作符是它的一个非常重要的概念,如官网: 而上节上也贴了一下都有哪些操作符,其实还不少,所以有必要仔细学习一下关于操作符这块的东东,那操作符在Rxjava中扮演着什么样的角色呢, ...
- 从Excel中读取数据并批量写入MySQL数据库(基于MySQLdb)
一.Excel内容如下,现在需要将Excel中的数据全部写入的MySQL数据库中: 二.连接MySQL的第三方库使用的是“MySQLdb”,代码如下: # -*- coding:utf-8 -*-im ...
- springboot 项目报错问题的解决
报错如下: java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test ...
- WHU个人赛第二场C——前缀和&&后缀和
题目 链接 题意:给定 $n$ 个整数,去掉其中一个数使得剩下数字的gcd最大,求最大的gcd.($3 \leq n \leq 100000$) 分析 枚举每一个位置,显然每次枚举都计算所有数的gcd ...
- C# 通过Process.Start() 打开程序 置顶方法
private void webBrowser1_Navigating(object sender, WebBrowserNavigatingEventArgs e) { try { foreach ...
- 之前写的关于chromedp的文章被别人转到CSDN,很受鼓励,再来一篇golang爬虫实例
示例说明:用chromedp操作chrome,导航到baidu,然后输入“美女”,然后再翻2页,在此过程中保存cookie和所有img标签内容,并保存第一页的baidu logo为png 注释已经比较 ...