ReactNative
 
不过除了这个RN官方文档,其他RN中文教程都很落伍,基本上都是16年左右的。所以建议大家有问题多去google外网有很多问题的解决办法。
当时学习时使用的windows。
学习成果:大致模仿出了一个App的基本框架及示例demo。
整个学习分为以下几个部分:
1、学习各个基础组件的使用方式和方法属性。需要主要关注的组件即
文字、text
文本输入、input组件
滚动视图、
图片组件
2、学会以上四个基础组件便可以组建出一些简单的视图页面。
除此之外需要学习一些基本的规范要求:例如,计时器,颜色,动画等的书写,并尝试将这些结合起来书写demo。
3、学习navigation的书写及属性及方法。navigation主要有三种:stackNavigator,drawerNavigator和tabNavigator三种各有各的书写方法,有特有的方法及属性。这个需要重点学习。navigator有官方网站https://reactnavigation.org/docs/en/hello-react-navigation.html。
4、学习Storage 本地存储。
var storage = new Storage({
ize: 1000,
// 存储引擎:对于RN使用AsyncStorage,对于web使用window.localStorage
// 如果不指定则数据只会保存在内存中,重启后即丢失
storageBackend: AsyncStorage,
// 数据过期时间,默认一整天(1000 * 3600 * 24 毫秒),设为null则永不过期
defaultExpires: 1000 * 3600 * 24,
// 读写时在内存中缓存数据。默认启用。
enableCache: true,
// 如果storage中没有相应数据,或数据已过期,
// 则会调用相应的sync方法,无缝返回最新数据。
})
global.storage = storage;
5、web与RN页面通信(web放在android/app/src/main/assets中)
<WebView
style={{ width: screenWidth }}
source={{ uri:'file:///android_asset/index.html'}}
javaScriptEnabled={true}
scalesPageToFit={true}
startInLoadingState={true}
onMessage={this.showdata.bind(this)}
ref='webview'
/>
Rn向web发送信息
this.refs.webview.postMessage(JSON.stringify({data222:'RN向web发送消息成功'}))
web接收RN发送的消息:
window.document.addEventListener('message', function (e) {
const message = JSON.parse(e.data);
alert(message.data222)
})
web向RN发送消息
window.postMessage(
JSON.stringify({data111:'web向RN数据传输成功'})
);
RN接收消息:onMessage={this.showdata.bind(this)}
showdata(e){
let it = this;
let data = JSON.parse(e.nativeEvent.data);
alert(data.data111)
}
6、有些图片需要放在原生的图标位置处,例如RN组件TextInput组件的inlineImageLeft属性的图片需要放在android/app/src/main/res/drawable/password.png处(原生App的图标所在处)。
面临的问题:
问题1、配置环境时,有时一直cannt get bridge,可能因为nodemodules的问题。有的时候使用cnpm下载会无法运行,使用Npm就好了。
问题2、navigator的页面传值问题需要重点学习。
eg1:()=>navigate('Catchtoys',{
'retitle':'抓娃娃'
})
eg2:this.props.navigation.navigate(this.state.retitle1)
问题三、页面间传值也可以使用监听的方法。
eg:DeviceEventEmitter.addListener('refreshtab',()=>{
storage.load({
key: 'routeState',
}).then(ret => {
this.setState({
retitle1:ret.retitl
})
})
});
DeviceEventEmitter.emit('refreshtab');
 

ReactNative学习一的更多相关文章

  1. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  2. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

  3. React-Native学习指南

    React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利.指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React ...

  4. [转] 整理了一份React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  5. 一份React-Native学习指南-感谢分享

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集React ...

  6. 整理了一份React-Native学习指南

    原文:  http://www.w3ctech.com/topic/909 自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull ...

  7. React JS和React-Native学习指南

    自己在学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南本指南汇集React- ...

  8. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  9. 一份React-Native学习指南

    直击现场 学习React-Native过程中整理的一份学习指南,包含 教程.开源app和资源网站等,还在不断更新中.欢迎pull requests! React-Native学习指南 本指南汇集Rea ...

  10. react-native 学习

    官网 https://facebook.github.io/react-native/docs/getting-started.html#content 下载 npm install -g react ...

随机推荐

  1. VMware虚拟机 Ubuntu 实用技巧 (2)桥接模式连接网络与网卡的配置

    1.先用ifconfig查看当前的网卡配置,一般没有进行设置之前,打印的信息如下所示. ens33 Link encap:以太网 硬件地址 02:0c:29:c6:be:c7 inet6 地址: fe ...

  2. linux shell习题训练

    shell习题训练 求2个数之和 计算1-100的和 将一目录下所有的文件的扩展名改为bak 编译当前目录下的所有.c文件: 打印root可以使用可执行文件数,处理结果: root's bins: 2 ...

  3. Java类载入器原理分析

    一:Java虚拟机中能够安装多个类载入器,系统默认是三个基本的类载入器: Bootstrap  ExtClassLoader  AppClassLoader 类载入器也是Java类.由于其它Java类 ...

  4. 2205 Problem B

    问题 B: [高精度]简单高精度加法 时间限制: 1 Sec  内存限制: 64 MB 提交: 77  解决: 25 [提交][状态][讨论版] 题目描述 修罗王解决了计算机的内存限制问题,终于可以使 ...

  5. es6 async与await实战

    在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...

  6. awk特征相同行的合并

    [root@linux-node1 ~]# cat test.txt hisk01 hisk02 hisk03 hisk04 hisk05 hisk06 hisk07 hisk08 [root@lin ...

  7. Chromium开发--入门C++小样例

      開始做Chromium开发的时候,都是从代码去摸索的,如今有几个样例了.希望看到的同学能有帮助,比直接在大量代码里领悟要快非常多了. C++ in Chromium 101 - Codelab h ...

  8. css 变手

    用css 添加手状样式,鼠标移上去变小手,变小手 用css 添加手状样式,鼠标移上去变小手,变小手 cursor:pointer; 用JS使鼠标变小手onmouseover(鼠标越过的时候) onmo ...

  9. Java类的加载、链接和初始化(个人笔记)

    这里看到一篇比较好的文章:http://www.infoq.com/cn/articles/cf-Java-class-loader 这里只是针对什么时候会触发java类的初始化(注意:这里不是说的实 ...

  10. 学生成绩管理系统【c】

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include<conio.h> #d ...