React Native Android使用 react native 应用

admin2024-10-07  26

React Native Android使用 react native 应用,React Native Android使用 react native 应用_facebook,第1张

2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。


什么是React Native

React Native 让开发者使用 JavaScript 和 React 编写应用,利用相同的核心代码就可以创建 Web,iOS 和 Android 平台的原生应用。React Native 的宗旨是,学习一次,高效编写跨平台原生应用。

官方的github地址为:https://facebook.github.io/react-native/


React Native有什么优点

1.提供了原生的控件支持

使用 React Native 你可以使用原生的控件,入在iOS平台我们可以使用UITabBar控件,在Android平台我们可以使用Drawer控件。这样,就让我们的App从使用上和视觉上拥有像原生App一样的体验。而且使用起来也非常简单。

2.异步执行

所有的JavaScript逻辑与原生的代码逻辑都是在异步中执行的。原生的代码逻辑当然也可以添加自己的额外的线程。

这个特性意味着,我们可以将图片解码过程的线程从主线程中抽离出来,在后台线程将其保存在磁盘中,在不影响UI的情况下计算调整布局等等。

所以,这些让React Native开发出来的App都是较为的流畅。

这个之间的通信过程也是有序列化来完成的,这个就让我们可以使用Chrome Developer Tools 来完成JavaScript逻辑的调试,当然我们也能够在模拟器和物理设备上调试。

3.触屏处理 
React Native实现了高性能的图层点击与接触处理。

4.Flexbox的布局样式 
使布局将变得更简单,这就使我们为什么要将网页的布局模式切换到React Native的Flexbox布局模式。Flexbox让UI布局变得简单,入使用margin和padding的嵌套模式。当然,React Native 同样也支持网页原生的一些属性布局模式,如FontWeight之类的。这些声明的布局和样式,都会存在内联的机制将其优化。

5.Polyfills机制 
React Native也支持我们使用第三方的JavaScript库,来方便我们的开发。支持npm中的成千上万的模块。

6.基于React JS 
拥有React JS的优良特性。


跨平台框架这么多?为什么重点关注React Native?

如我们之前所介绍的,Android与IOS跨平台开发框架如此这多,如之前我们介绍的PhoneGap、Xamarin等,为什么我们重点的关注React Native呢?

  1. Facebook所开源的框架 
    我们知道,所有的开源框架,只有是一线的大公司研发出来的才能够保证框架的维护性、可用性。当然,这样也会吸引更多的开发者使用这个框架,才能够使我们在人才储备上有人可用。并不是说,框架多好就能够用的。如国内的CrossApp,虽然很好用,但是知名度不够,造成我们研发、bug反馈、人才招聘上的种种窘境。
  2. React JS技术的革命 
    这个东西也就是国内的很多跨平台框架没有关注的地方,Facebook使用了React JS已经有了好几年的技术变革,特别是JSX与Virtual DOM的加入,给使用JavaScript来开发Native App简直是一个质的飞跃。
  3. BAT团队已经投入研发与使用 
    如果很多中小型公司,看不清方向,这个我们倒是可以模仿BAT的脚步。现在的BAT公司内部,特别是A,已经投入了大量的人力在React Native上面,听说TMall App已经开始使用React 进行重构。

我们可以看到,目前对于Facebook来说,他们的新业务线也将直接使用了React Native的开发模式 

React Native Android使用 react native 应用,React Native Android使用 react native 应用_facebook_02,第2张


搭建React Native 的 Windows 环境

NodeJs、Python、Android SDK、JDK

由于我们大天朝网络的限制,很多依赖的库都fetch不下来。所以整个React Native的环境搭建,命令执行都是一个痛苦的过程。(就连NodeJS我都快下了半天的时间)

我在Windows平台上搭建环境弄了差不多一周的时间,都没有弄下来,特别是下面这个问题一直困扰着我

<code class="hljs livecodeserver has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">bash: ulimit: <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span>: cannot modify limit: Too many <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">open</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">files</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

后面得到了高人的指点,借给我了一个梯子,并在我的Mac设备上成功的运行了自己的第一个React Native项目。哭~~~

下面是我的运行步骤,大多数是和官方的介绍一样的:

我们先从Github上获取React Native的代码

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

<code class="hljs php has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">git <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">clone</span> https:<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//github.com/facebook/react-native.git</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

进入React Native 并使用npm 进行安装

<code class="hljs lasso has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">npm install <span class="hljs-attribute" style="box-sizing: border-box;">-g</span> react<span class="hljs-attribute" style="box-sizing: border-box;">-native</span><span class="hljs-attribute" style="box-sizing: border-box;">-cli</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

注意 
- 使用npm进行安装,需要搭建好完整的nodejs环境,nodejs地址:https://nodejs.org 
- npm install 需要依赖于很多国外资源,自备翻墙梯子


新建自己的React Native项目,这里命名为AwsomeProject

<code class="hljs java has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">react-<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">native</span> init AwsomeProject</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

运行完后,如果环境变量没有配置错误,react 将会帮我们生成一个AwsomeProject的文件夹目录。

里面内如如下所示: 

React Native Android使用 react native 应用,React Native Android使用 react native 应用_facebook_03,第3张


运行Android App

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>cd <span class="hljs-constant" style="box-sizing: border-box;">AwesomeProject</span>
<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$ </span>react-native run-android</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

看起来很简单的两句命令,但是里面隐藏这很多的陷阱。 
- 确保Gradle的环境配置好了,这里还会动态的down很多Gradle的依赖文件,不翻墙估计依赖文件都下不下来 
- 需要安装好自己的Python环境(怎么安装google吧),React Native 的 packager需要 python的支持 
- 这个东西,只能运行在Android模拟器上,真机运行必须失败,至于为什么后面在介绍

注意好上面三点,就能在模拟器上看到如下画面了 

React Native Android使用 react native 应用,React Native Android使用 react native 应用_facebook_04,第4张


运行iOS App

ios相对就简单了很多,直接打开 ios/AwesomeProject.xcodeproj 文件,使用Xcode编译运行就能出现和Android类似的界面了。我的效果如下:

React Native Android使用 react native 应用,React Native Android使用 react native 应用_跨平台_05,第5张

注意,同样只能够在模拟器上运行

React Native的优势和劣势:(转):

React Native的优势:

相对Hybird app或者Webapp:

  • 不用Webview,彻底摆脱了Webview让人不爽的交互和性能问题
  • 有较强的扩展性,这是因为Native端提供的是基本控件,JS可以自由组合使用
  • 可以直接使用Native原生的「牛逼」动画(在FB Group这个app里面,面板滑出带一点果冻弹动,面板基于某个点展开这种动画随处可见,这种动画用Native code来做小菜一碟,但是用Web来做就难上加难)。

相对于Native app:

  • 可以通过更新远端JS,直接更新app,不过这快成为各家大型Native app的标配了…

劣势:

  • 扩展性仍然远远不如web,也远远不如直接写Native code(这个不用废话解释了吧)
  • 从Native到Web,要做很多概念转换,势必造成双方都要妥协。最终web要用一套CSS的阉割版,Native要费劲地把这个阉割版转换成native原生的表达方式(比如iOS的Constraint\origin\Center等属性),两边都会不爽。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!