<React Native> 学习日记(1) 成功运行、编译RN-android的爬坑记录
来源:互联网 发布:开淘宝店怎么代理货源 编辑:程序博客网 时间:2024/06/10 10:20
前言
- 从15年下半年开始,不断的在网络上看见各路大神推荐React Native是如何神通广大,但对于初识Android的我来说并不理解这到底是个什么东西。最近团队打算用这个技术实现我们客户端App的首页(会不定期发布活动),这对于我来说又是一次自我的提升和学习机会。
定义
什么是React Native?
这个也是我当初第一次接触到这个概念的疑问,不过纵观网上各路帖子,但一直以来都很模糊。React Native 底层是Java Script ,调用的是原生组件,而非HTML5组件(HTML + CSS + JavaScript)。运行时,可以做到与Native App媲美的体验,同时因为JavaScript代码可以使用后端强大的Web方式管理,既可以做到高效开发,也可以做到快速部署和热修复。通俗的话来说,就是使用js代码来调用android的原生控件,来解决webview在app的性能问题,并且能做到服务端快速部署和热修复,避免不断发版本来更新影响用户体验的缺点。为什么要使用React Native?
最初也提到了,用这个技术来改善app首页样式的灵活性和丰富性。虽然,现在的做法也是由服务端来控制首页的布局加载(首页由很多个block来构建,类似于搭积木一样,也类似于recycleview 通过不同的type返回的layout来组装出一个首页),但优缺点都显而易见。
优点是:原生实现,体验好。
缺点是:不够灵活,样式不够丰富,只有通过每次版本升级来增加其余样式block(大家想想淘宝、天猫的首页,就能体会到了)。 虽然说react-native解决了以往webview的性能问题,和服务端控制的灵活问题。但对于这样的一个新技术,封装出一套可维护性扩展性能高的框架,也是今后研究的重难点。
(阿里开源了weex,之前看过https://zhuanlan.zhihu.com/p/21677103这篇weex和RN的对比,文章中指出weex解决了RN封装的问题,不过笔者打算先自己尝试体会封装RN,再感受weex,这里以后再谈)
环境搭建
- https://facebook.github.io/react-native/docs/getting-started.html#content ; 官方说明虽然是英文的,不过很有用,笔者在Linux 和 Windows 下根据起提示的操作环境,都成功搭建起了环境。
建立、运行React Native项目
- http://reactnative.cn/post/10,这篇帖子是在Windows下的项目建立。
编译、运行RN项目爬坑
- 关于运行react-native run-android编译报错的问题,这里大家一是可以通过报错的异常信息提示来进行处理,二可以搜索异常解决方案,网上都有很详细的信息。这里就不重复赘述了,笔者都是这样过来的,都能够搜索到。
- 这里主要提示一下新手从网上下载的RN项目源码,或者自己建立的项目,打开项目一定要遵循以下步骤,以免遇到一些莫名其妙的坑。
1.切换到项目目录下
2.执行npm install
3.raect-native run-android
4.如果启动报错,执行npm start的命令
(以下是Windows环境下的截图)
总结
- 这里给大家推荐两个比较好的学习地址:
https://facebook.github.io/react-native/docs/getting-started.html#content
http://reactnative.cn/ - 以及一个简单的开源项目:
https://github.com/KevinOfNeu/xReddit
- <React Native> 学习日记(1) 成功运行、编译RN-android的爬坑记录
- RN(react native)入坑指南-01,Hello RN
- RN(react native)入坑指南-01,Hello RN,Windows下的环境搭建
- RN(react native)入坑指南-03,运行官方示例UIExplorer
- react-native监听Android(Android向RN发送事件)
- RN(React Native)开发Android App的新技术?
- Android 在 Fragment 中集成 React-Native(RN)步骤
- RN(react native)入坑指南-09,单元学习小结
- 《React-Native系列》 RN学习之NodeJS
- 《React-Native系列》 RN学习之NodeJS
- 【React Native】那些年RN上跳过的坑
- RN(react native)入坑指南-04,布局容器
- RN(react native)入坑指南-附录A,常用命令
- RN(react native)入坑指南-10,组件的生命周期
- (React-Native 学习之四) RN 官方Demo 搭建 RNTester 运行
- react-native的原生传参到rn
- react-native学习记录
- React Native for Android 学习笔记(一) 操蛋的环境搭建与demo运行
- 125. Valid Palindrome
- PE文件详解之区块表
- 华为机试题【9】-整数分割为2的幂次
- 我对CONTAINING_RECORD宏的详细解释
- hdu 5178(尺取法)
- <React Native> 学习日记(1) 成功运行、编译RN-android的爬坑记录
- web开发的一些小经验
- 离散傅里叶(DFT) 与 快速傅里叶(FFT)
- A. Mike and Cellphone(cf#361)
- JavaScript强化教程——正则表达式回溯
- js自定义多级联动下拉菜单,实用方便
- HDU 1240 Asteroids! (三维BFS)
- Surfaceflinger 概述
- Android之自定义搜索框