首页 » React Native » React Native技术文章 » 正文

React Native开发阶段性总结(2016-5-20)

本文是网友兔子投稿

原文地址http://t.cn/R5VzkLP

刚创建的React Native交流6群:426762904,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

一、安装和部署

1、一手资料来自于官网的Getting stated,对于新手来说,看见这句话无疑是最开心的了

https://facebook.github.io/react-native/docs/getting-started.html#content

2、然后参照 tutorial 学会用 react-native 搭建你的第一个应用:

https://facebook.github.io/react-native/docs/tutorial.html#content

3、学习源码

https://github.com/facebook/react-native

虽然官网有很多讲解,但是想学明白,看源码模仿 example 是最直接有效的,github 上给出了运行 example 的方式

但是要注意在运行 example 的时候有一些坑,是 npm install 之后,要想运行成功./packager/packager.sh,我遇到了很多阻碍,总结来说,就是很多依赖包并不能直接下下来,建议哪出错解决哪,大概遇到的问题有:

1)需要 ndk,版本必须是10,我开始用的11,总是编译不过去,具体说明见

https://facebook.github.io/react-native/docs/android-building-from-source.html

官网说用10,就用10,不要换版本,至于10c 还是10e 都行

2)有些依赖包可以提前下好放到指定的位置上

二、概述

react-native 是一个移动 web 的 ui框架,使用 react技术,提供了一系列常见组件,有些组件是通用在 android 和 ios上,有些是特有的。

三、使用方式

react-native 提供的各组件其实就是react 的 component,但是兼顾了移动端的操作特性,区别于常见 web 端的组件,例如下拉框,支持弹出式。viewpagerandroid,模仿原生的 viewpager 的形式。

每种组件均提供了若干属性,总的来说包括:

1)描述外貌的

2)描述位置的

3)描述动作的

4)描述子组件的摆放位置的

等等

其中1)可以内置 style 的形式来描述,例如

也可以写在 stylesheet 中,例如

四、学习路线

1、要掌握 react-native 一定要学会 react,因为他的本质还是一套 js框架,并且遵循 react 的特性,例如 props、state的使用,各生命周期的使用

2、结合案例使用各组件,了解各组件能实现什么不能实现什么,以便以后在项目中因地制宜

3、掌握调试方式,启动方式等

4、学会在 android 中定义组件,在 web 中使用,因为 app 不可能完全靠移动 web,所以需要 native 和移动 web 配合使用,涉及到交互、数据的传递等具体事宜,在使用中发现问题、解决问题

五、案例解析

UIExplorer 是所有组件的使用案例,把刚才 example 的执行语句

./gradlew :Examples:Movies:android:app:installDebug

替换成

./gradlew :Examples:UIExplorer:android:app:installDebug

就会在设备上安装一个应用,如图,图中圈出了三个应用,右边两个分别是 example 提供的,最左边这个就是 tutorial 指导下创建的第一个应用。

真机上需要配置访问地址,否则无法获取目标 web 页,会有红色的提示,配置方式:

有菜单键的手机点击菜单键,没有菜单键,摇晃手机,界面如图

第一个 Reload JS:当每次修改 js 代码的时候,点击这个就相当于刷新页面了,不需要执行命令行重新编译。

最后一个 Dev Settings:设置 ip 和端口号,如图

   

原理就是,android 应用加载了一个 web 页面,所有的逻辑都在这个 web 页面上,通往 web 页面的通道就是这个 ip 的设置,每次加载完 应用,会对当前页面记录下来,下次打开应用会显示当前的状态,只有再次进行页面的访问才会再通过网络,如果此时网络不好,依然会显示一个红色的提示页面。

一切就绪后,就会看见UIExplorer了,列出了所有的组件列表

  

对应于源码的目录基本可以从类名上找到想看的源码,例如 ImageExample,他把所有的案例都存在一个 examples 的 json 数组中了,描述了标题、说明、内容等主要信息

在 createExamplePage页中会统一对这种页面进行加载

入口是根目录下的UIExplorerApp.android.js

侧边栏是导航,内容是内容页

DrawerLayoutAndroid 是 RN 提供的组件,模仿 android 原生的滑动菜单的形式,而主屏中的页面作为这个组件的内容:

this._renderApp()

通过这个入口就可以自己往下看往下分析了,具体的组件单独看独立的源码即可。

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

关注我的微博,可以获得更多精彩内容