<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
0 0
原创粉丝点击