Sponsered by
React Native 中文版(含新增 Android 章节)
Facebook 在
大会上推出了基于 JavaScript 的开源框架 ，本中文教程翻译自 。
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和
一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
React Native 交流群
React Native QQ 交流群已加满，请加交流2群： 和大家一起交流学习 React Native
React Native for Android
Facebook 于 2015 年 9 月 15 日发布了 React Native for Android， 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。
新增 Android 相关章节:
如有任何关于翻译、内容或资源推荐，欢迎通过 GitHub 提交 PR 给我们。\(o_X)/
React Native 官网：
GitHub 地址：
React Native 中文教程(For Android)发布
贡献者名单
React Native 中文版 由
创作，采用 进行许可。基于上的作品创作。2733人阅读
react-native/web周边（3）
【工匠若水
未经允许严禁转载，请尊重作者劳动成果。】
一眨眼又一年快要过去了，原计划今年的最后一个小目标（React Native）看样子要留尾巴到明年了，React Native 想说爱你不容易。怎么评价你呢？应用层 JSX 编写还是很友好的，尼玛框架接入的各种锅却让人痛哭不已，万事开头难，对于 React Native 的接入可以说大量工作可能都需要投入到框架接入中（各种灰度实验的兼容性、各种锅），一旦接入稳定以后真的就是尝到甜头了，然而到现在为止框架的稳定接入依旧需要投入大量时间。既然如此，为了连贯那就先来一发假装接入后的甜头 —- React Native 开发（Android 开发的角度来实现 React Native JS 应用）。
下面分享一个基于 React Native 的 Android 版个人业余实战项目，以便记录个人学习及运用 React Native 的一些总结；该篇为本项目 1.X 版本的实战总结，2.X 等版本的总结在做完及验证合入 master 以后再做入坑总结吧，所以这篇会比较简单。
本项目开源地址：
【工匠若水
未经允许严禁转载，请尊重作者劳动成果。】
2 项目分享
RNPolymerPo（），一个基于 React Native 的 Android 生活聚合类应用；编写的初衷就是为了整理汇总使用 React Native 的一些技巧，使用的工具是 Android Studio & Visual Studio Code & Chrome，下面我们分别介绍该项目的成型情况。
2-1 项目框架
整个项目采用 React Native JS 进行编写，数据统计和应用分发采用蒲公英测试平台，后台采用聚合数据等相关免费 API 接口。核心界面包括 Splash 广告倒计时闪屏页、主界面（含悬浮球）、微信精选页面、新闻分类查看页面、个人中心页面、在线机器人客服聊天页面、通用 WebView 跳转页面，整个实现完全模拟了一个常规企业级应用的常见页面来处理，以此就可以比较系统的学习 React Native 的 JS 编写技巧及踩坑记录，整个项目使用了 React Native 及配套的 React Native Redux 框架，具体 package.json 中依赖如下：
"dependencies": {
"react": "15.4.1",
"react-native": "0.38.1",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0",
"react-native-swiper": "^1.5.4",
"react-native-scrollable-tab-view": "^0.6.0",
"react-native-tab-navigator": "^0.3.3"
2-2 Splash开屏广告倒计时页面
大致效果如下图（实际为启动时模拟随机获取服务端一张广告图片，正式可替换为 WebView 等，然后图片以动画淡出显示，显示 图片时左上角再显示 AD 字样，右下角显示 5 S 倒计时全屏幕开屏）：
涉及知识点及处理技巧：
注意开屏的概念，展示后进入应用主页后点击 Back 不能再显示，所以在使用 Navigator 组件由 Splash 页面跳转 Home 页时要使用 Navigator 的 replace 等方法来替换当前栈，避免 Back 又回来 Splash 页面。
React Native 动画在 Android 某些设备上性能还是有些堪忧，所以能省略就尽量别使用吧。
2-3 Home 页潮流生活 Tab 页面
大致效果如下图，由于可以上下滑动，所以采用了 React Native 的 ListView 来实现父布局，顶部 TooBarAndroid 为自己再次包装的 ActionBar 组件，循环 Banner 采用开源组件 react-native-swiper 实现，接着的 10 个分类采用二次封装的 ListView 实现，万年历为普通布局，以上全部作为 ListView 的 Header 渲染，下面的电影列表作为 ListView 的 item 渲染，所有模块访问自己的服务器接口。
涉及知识点及处理技巧：
React Native ListView 类比 Android 的灵活使用（RN ListView 存在性能问题，最好寻求替代方案）。
悬浮球布局技巧采用 React Native 的 style 的绝对 position 实现。
react-native-swiper 开源组件的学习（不能只会用，要学人家怎么自定义 RN 纯 JS 层组件的，实质也是 ScrollView 的相关属性组合控制实现，类似 Android 的自定义，因为实质就是 Android 端各种 Touch 事件传递过来换了叫法而已，猫就是咪，咪就是猫的道理）。
底栏采用 react-native-tab-navigator，实质依旧是想学习下人家的写法，毕竟是写 Android 的，虽然知道是事件控制，但是还得学些人家优质的 JS 写法，实质要学习的就是灵活掌握如何封装组件及切换 Tab 时 RN state 的处理。
2-4 微信精选 Tab 页面
实际效果如下，数据来源于免费 API，JSON 格式，主要就是分页加载的 GridView 使用技巧总结，上拉可以加载更多页，每页 10 个 item。
涉及知识点及处理技巧：
React Native ListView 灵活运用，分页加载的组件实现技巧及配合 Redux 的分页加载处理技巧。
ListView 封装成 GridView 的技巧（注意 item 的key 值设定，避免不必要的性能问题）。
2-5 个人中心 Tab 页面
效果如下图，具体采用 ScrollView（不用 ListView 是想尽可能的在一个项目中练习使用尽量多的 React Native 组件），比较简单，没有太多技巧涉及。
涉及知识点及处理技巧：
常规 React Native 文档接口使用技能，没啥技巧。
Item 推荐的内容都值得拜读。
2-6 潮流生活 Tab 页新闻分类页面
具体效果如下，实质就是 ViewPager 左右滑动，使用了 react-native-scrollable-tab-view 开源组件，感觉作者 JS 功底还是很厉害的，懒加载页面，每页为 ListView 进行 item 渲染，数据来源于聚合数据免费 API JSON 接口。
涉及知识点及处理技巧：
react-native-scrollable-tab-view 组件使用，现在还在研究这个组件自定义实现的细节，后面有空再细说一篇成果吧，这个老外还是很厉害的，膜拜。
ListView 的常规渲染，数据拉取不同状态时页面渲染不同的组件，譬如 Loading、Item 等，比较符合真实生产环境（注意 item 的key 值设定，避免不必要的性能问题）。
2-7 个人中心在线机器人客服页面
具体效果如下，数据来源于聚合数据免费图灵机器人 API，主要模拟了 IM 类型应用的开发，实质为 React Native 的 ListView 配合相关技巧完成，基本类似一个简单的 IM 交互界面。
涉及知识点及处理技巧：
聊天界面数据采用 JS 数组保存，每次对话双方数据均通过 Redux 发送触发 state 然后在聊天界面的 render 中插入界面预定义的数组中再刷新界面（state 的优化，不要存储太多大量数据，而尽可能做标记）。
两个聊天 item 布局使用同一个封装的组件，只是依据是谁的 type 决定使用怎么样的 style而已，以此做到动态布局。
键盘输入后聊天自动向上滑动采用了 React Native ListView 自生性能的一个坑实现，那就是每逢 item 刷新时 ListView 的 Header、Footer 都会重新刷新，所以我们可以通过 Footer 的 onLayout 方法获得为止进行 ListView 的 scrollTo 滑动，以此实现 IM 聊天自动滑屏。
暂时有一个锅还没找到原因，键盘弹出时一些固件上概率性 ToolBar 被顶上去了，坑爹。
2-8 通用 RN WebView 页面
类似常规 Android 应用开发一样，我们一般整个应用都会设计一个通用不同参数传递的 WebView 界面，支持 Web 多级页面 goBack 操作，支持 Web 其他操作，纯 Android WebView 的封装使用，在本应用中依据不同参数展示微信精选详情、新闻详情、电影详情、个人中心技术推荐详情等。
涉及知识点及处理技巧：
React Native WebView 在某些固件上概率性 Web 多级页面 goBack 崩溃。
注意 WebView 页面多级页面物理 Back 键的支持和 JS 注入的技巧（类似 Android 中 JS 注入一样）。
以上就是目前整个该项目的简单总结，接下来主要会优化适配多语言、夜间模式、兼容性崩溃！！！！！！！！所以等到适配完成大致兼容测试后再写 2.0 版本的总结吧。
【工匠若水
未经允许严禁转载，请尊重作者劳动成果。】
3 项目总结
到此对于一个 Android 开发来说，我只能说我自己被沦陷了，还是期待自己尽快啥时候能搞定框架接入的兼容锅吧，这样平台有了以后 React Native 应用层的 JSX 实现起来业务也就真的一劳永逸了，万事开头难啊，难于上青天啊。不过说句题外话，通过 React Native 的学习也促使我对 JS 学习的欲望，即便将来 React Native 真的不被看好之时自己也没有损失，因为不仅学会了前端的一些东西还对多平台特性有了认识，更重要的是 React Native 框架源码的拜读也能对自己架构把握、思路拓展、代码风格等各方面得以提升。这么想的话，未尝不是一件好事呢？还管那么多 React Native 值不值得学习、值不值得被看好的流言干嘛呢？还是那句老话，行胜于言。
总而言之，React Native 第一版的框架接入一定是痛苦的，但是框架一旦稳定了就是造福大众，这是显而易见的。
本项目开源地址：
PS：好几个晚上没有规律作息了，这么晚睡就为了整理这玩意，免得以后忘了，好记性不如烂博客，罪过啊！
【工匠若水
未经允许严禁转载，请尊重作者劳动成果。】
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：919657次
积分：8120
积分：8120
排名：第1938名
原创：102篇
转载：10篇
评论：1250条
文章：26篇
阅读：42921
(2)(3)(1)(2)(6)(1)(1)(5)(2)(2)(1)(2)(29)(25)(1)(3)(2)(1)(1)(2)(9)(10)966,690 十二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React-Native痛点解析之开发环境搭建及扩展
React-Native痛点解析之开发环境搭建及扩展
欲知区块链、VR、TensorFlow等潮流技术和框架，请锁定
Author Contacted
相关厂商内容
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！}