您的位置:时时app平台注册网站 > 编程知识 > React Native创立四个应用软件

React Native创立四个应用软件

2019-10-11 01:10

个人感受,react-native不是万能药,只是一种高效的解决方案,不要期望它解决所有的问题,要不要使用需要场景衡量;客户端转开发react-native感觉比较简单,比较JS大部分人都有基础,前端人员开发react-native理解原生部分的代码应该十分困难;相比原生海量的第三方控件和第三方包,react-native大部分道路还得靠自己摸索;不同端的代码风格和结构大体类似,但具体标签可能会不一样;目前得到经验是IOS版本比较稳定,android版本还不太成熟,android 版本2015年下半年发布,一直在0.*版本上更新,android1.0版本还没有发布;把把facebook的第三方包网络连接包okhttp和图片下载解析包fresco等一起封装进结果,造成包增加7、8M,但据了解这是可以修改的;只支持IOS7以上和android4.1以上机型,这应该不成问题,比较其他属于少数;听说qzone使用了react-native,但是crash率前10,react-native占8个,前5全是react-native,但是我一朋友项目使用过react-native,虽然有坑,但是不会有如此多crash;

总结

本文对react native是什么,能做什么,做了一个大致的了解,并创建了一个全新的react native项目并成功编译运行,了解了项目中的结构,和接口文件中的内容。浅析了react native架构,理解了LEARN ONCE, WRITE ANYWHERE的道理。简单阐述了,当前版本所支持的语法版本,和解释什么是虚拟DOM,和它的作用。

成熟案例

https://facebook.github.io/react-native/showcase.html

参考

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

React.JPG

总结:原生开发虽然有各种缺点,但是在目前所有的开发技术中原生是最成熟,有效,也是开发人数最多,开源库最广泛的。对APP要求各方面性能、响应要求高,人员充足,完整开发、测试流程,适合原生APP开发。

浅析react native架构

图片 1

react native 架构

  • 1.在不同平台上使用js和jsx语法编写react代码,js解释器可以在不同平台运行。
  • 2.通过虚拟DOM更新和刷新状态进行对组件的重新渲染
  • 3.将结果展示到不同的终端

jsx

jsx是JavaScript的语法延伸,看起来像XML结构。目前react native支持ES6的语法。

虚拟DOM

React中的DOM并不保证马上影响真实的DOM,react会等到事件循环结束,利用diff算法,通过当前新DOM树与之前的DOM树作比较,计算出最小的步骤更新真实的DOM。这样做的好处是性能得到了很大的保证。

搭建React Native开发环境:

原生开发是系统自带的app开发方式,也是大部分人最熟悉app开发的技术,如android、ios、wp。

如何初始化你的第一个react native项目

由于操作系统的原因,和环境的问题,暂时演示,IOS App的初始化

  • 需要node.js, React Native 命令行工具和Watchman
    推荐使用Homebrew安装node.js和Watchman。

brew install node
brew install watchman

  • 使用npm安装 React Native 命令行工具接口

npm install -g react-native-cli

  • 测试安装react native项目
    使用react native命令行工具生成一个新的react native项目,命名为MyFirstRNApp,然后进入项目的根目录,运行react-native run-iso命令

react-native init MyFirstRNApp
cd MyFirstRNApp
react-native run-ios

  • react-native init MyFirstRNApp

    图片 2

    初始化中的MyFirstRNApp

![](https://upload-images.jianshu.io/upload_images/2817377-da05d7706120477d.png)

初始化MyFirstRNApp成功
  • react-native run-ios

    图片 3

    编译中

![](https://upload-images.jianshu.io/upload_images/2817377-fc480dcafbb3d512.png)

编译成功后弹出,react native控制台页面



![](https://upload-images.jianshu.io/upload_images/2817377-e185f4f70244e69f.png)

第一个react native项目页面

React Native布局:

Flexbox是css3里边引入的布局模型-弹性盒子模型,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能够适应不同屏幕的宽度。React Native中的Flexbox是这个规范的一个子集。
Flexbox:浮动布局、不同宽度屏幕的适配、宽度自动分配、水平垂直居中

Flexbox属性
容器属性:

  • flexDirection
  • flexWrap
  • alignItems
  • justifyContent

元素属性:

  • flex
  • alignSelf

通过StyleSheet声明样式 。

6.编辑index.ios.js里的代码,也可以额外在其目录添加其他js文件,进行代码编写。
下面的代码是按照ES6语法标准来写,一般现在大都是用ES5语法标准来写。

图片 4

Es6.png

7.关于react native 还是需要多敲代码去熟悉,冰冻三尺非一日之寒。

原理上看react-native在js端和java端互相有个映射关系,通过两端的配置表来实现,java端和js端持有同一张表,通信时靠这张表的各个条目的对应进行的。上面提到了facebook实现了组件让开发者调用,就是通过js的配置表调取原生控件,java调用js也是类似的情况。所以当我们使用复杂控件时,可以自己实现java代码,添加入配置表中,即可自定义心新的映射关系,让我们js调用自定义的复杂控件 , 当然web 、ios、androi需要实现不同的控件代码,只是js端的调用代码一样或者类似。

react native项目结构介绍

在项目根目录下有3个文件夹,2个js文件,一个json文件

  • 文件夹 android
    主要存放关于项目android的文件
  • 文件夹 ios
    主要存放关于项目ios的文件
  • 文件夹 node_modules
    存放的是一些项目依赖包
  • index.android.js
    为安卓 app的入口文件
  • index.ios.js
    为iOS app的入口文件
  • package.json
    为该项目依赖包的管理文件

图片 5

react native项目结构图

  • index.ios.js 入口文件解析
    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    * @flow
    */

      //es6的语法格式
      import React, { Component } from 'react';
      import {
        AppRegistry, //入口文件必备,提供整个app组件注册的功能
        StyleSheet, //样式表
        Text, //react native 提供的组件 Text
        View  //react native 提供的组件 View
      } from 'react-native';
    
      //js的类文件
      class MyFirstApp extends Component {
    
        //渲染返回包装好的组件
        render() {
          //返回包装好的组件
          return (
            <View style={styles.container}> /*相当于div*/
              <Text style={styles.welcome}>
                Welcome to React Native!
              </Text>
              <Text style={styles.instructions}>
                To get started, edit index.ios.js
              </Text>
              <Text style={styles.instructions}>
                Press Cmd R to reload,{'n'}
                Cmd D or shake for dev menu
              </Text>
            </View>
          );
        }
      }
    
      //样式表文件
      const styles = StyleSheet.create({
        container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF',
        },
        welcome: {
          fontSize: 20,
          textAlign: 'center',
          margin: 10,
        },
        instructions: {
          textAlign: 'center',
          color: '#333333',
          marginBottom: 5,
        },
      });
    
      AppRegistry.registerComponent('MyFirstApp', () => MyFirstApp);
    

以上这就是使用JavaScript和react构建的一个原始App的代码,很简单吧。

(注意:必须是Mac系统。。。)

1.首先下载安装nodejs:https://nodejs.org/en/
安装node.js和npm,其中nvm是node.js的一个版本管理器

brew install nvm# mkdir ~/.nvm 创建nvm的工作空间
vim ~/.bash_profile 编辑环境变量
source $(brew --prefix nvm)nvm.sh 使生效
nvm 检查
nvm install node && nvm alias default node 安装node.js
nvm use --delete-prefix v4.2.1

PS:以上步骤可以不用这么麻烦,直接去node.js官网下载安装包安装即可。

检查:# node -v 和 # npm -v

2.然后推荐使用Homebrew的方式来安装 nvm,watchman 和 flow:
Homebrew是mac上的一个包管理器,到Homebrew主页使用主页上的那条命令进行Homebrew的安装。

检查Homebew:# brew -v
先安装homebrew(参考官网):ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
通过Homebrew 安装 watchman 和 flow
brew install watchman
brew install flow
后面两个命令是为了保险起见,所以写进去。
brew install node
brew install nvm

建议定期运行 brew update && brew upgrade 来使您的应用程序保持最新状态。

3.安装react native命令 :

sudo npm install -g react-native-cli 

4.创建react native项目:
在终端,找到你希望保存的项目文件,然后运行命令:

react-native init BookSearch

切换到BookSearch文件夹

cd BookSearch
open BookSearch.xcodeproj

react-native init卡很久的解决办法:

镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):

1.通过config命令npm config set registry https://registry.npm.taobao.orgnpm info underscore (如果上面配置正确这个命令会有字符串response)
2.命令行指定npm --registry https://registry.npm.taobao.org info underscore
3.编辑 ~/.npmrc 加入下面内容registry = https://registry.npm.taobao.org
演示:
cd ~/
vim .npmrc
输入a添加内容
点击esc,输入:wq保存退出

5.打开BookSearch下的ios启动文件,用xcode打开再运行,会出现以下画面:

图片 6

start.png

运行项目:
iOS: 用xcode打开运行.
Android: react-native run-android.

cd Desktop/HelloReactNative/
react-native run-android

补充:

  • iOS所需环境:Xcode6.3及以上版本。
  • Android所需环境:
  1. JDK-配置环境变量
  2. Android SDK-配置环境变量
  3. 安装build-tools23.0.1以上、api23、Android Support Repository4.安装Intel x86 Atom System Image(如果用genymotion或真机可不安装)

H5开发是Html5开发的app,本质上运行在手机浏览器中的页面,一般使用app做一个壳套用浏览器运行H5的页面,由于H5的特性也有很多app使用半原生半H5的hybird app 开发模式。

为什么使用react native?

既拥有Native的用户体验、又保留React的开发效率。——引自React Native的发布稿
react native通过一次编写可以在IOS和Android设备上运行。这样可以为公司节约成本,使代码更好维护。(不用再招2大客户端的程序员、代码也不需要维护2套,但现在还有一些组件是属于IOS或者Android专有的所以请尽量选择使用那些用JavaScript编写的组件)。只要熟悉web开发,就可以成为潜在的客户端开发者。使用单一的JavaScript库就能写出真正的原生的iOS和Android的应用来。当然学习react时需要理解其中的概念,还是有些时间成本。那么什么又是react native呢?请往下看。

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
React Native的优点:
1.跨平台,兼容Web、iOS、Android三大主流平台
2.React调用原生控件,性能优于H5框架
3.更好的手势识别
4.实时部署更新,再也不担心应用市场审查缓慢设计理念:既拥有Native的用户体验,又能保留React的开发效率。

转至

什么是react native?

Facebook在2015年发布了react native的第一个版本。可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。只要编写一次,能在任何手机端上跑。

  • Build Native Mobile Apps using JavaScript and React。
    react native 仅仅使用JavaScript就能让你编写一个原生的手机App。使用起来有点像React,让你使用组件式的形式编写手机App。
    它看起来像下面这个样子。

     import React, { Component } from 'react';
     import { Text, View } from 'react-native';
     class WhyReactNativeIsSoGreat extends Component {
     render() {
        return (
          <View>
            <Text>
              If you like React on the web, you'll like React Native.
            </Text>
            <Text>
              You just use native components like 'View' and 'Text',
              instead of web components like 'div' and 'span'.
            </Text>
          </View>
         );
        }  
      }
    
  • 使用react native编写的app是一个真的手机App
    使用react native,你不用编写一个“mobile web app”或者 “HTML5 app”,你所编写的App都是从 Objective-C 或者 Java原生而来。react native使用一些基本的UI组件去构成IOS和Android的App。你只需使用JavaScript 和 react把这些组件组装在一起。
    例如像下面这样一个例子,创建了一个可滑动的视图。
    import React, { Component } from 'react';
    import { Image, ScrollView, Text } from 'react-native';

      class AwkwardScrollingImageWithText extends Component {
        render() {
          return (
              <ScrollView>
                <Image source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}} />
                <Text>
                  On iOS, a React Native ScrollView uses a native UIScrollView.
                  On Android, it uses a native ScrollView.
    
                  On iOS, a React Native Image uses a native UIImageView.
                  On Android, it uses a native ImageView.
    
                  React Native wraps the fundamental native components, giving you
                  the performance of a native app, plus the clean design of React.
                </Text>
              </ScrollView>
          );
        }
      }
    
  • 不要把时间浪费到重新编译上
    react native能让你快速的编写一个app,在重新编译这块,你可以立刻看到看到你修改的效果。使用热重载技术,你甚至可以在运行新的代码,并且保留应用的状态。

    图片 7

    热重载技术

  • 需要时可以使用原生的代码
    react native可以毫不费力的,与Objective-C、java、swift写的原生组件桥接起来。
    import React, { Component } from 'react';
    import { Text, View } from 'react-native';
    import { TheGreatestComponentInTheWorld } from './your-native-code';

      class SomethingFast extends Component {
        render() {
          return (
              <View>
                <TheGreatestComponentInTheWorld />
                <Text>
                  TheGreatestComponentInTheWorld could use native Objective-C,
                  Java, or Swift - the product development process is the same.
                </Text>
              </View>
          );
        }
      }
    
  • Facebook官方使用React Native开发的应用:Groups/Ads Manager/F8/Adverts Manger
  • 官方参考教程网站:facebook.github.io/react-native/
  • 其他参考教程:wiki.jikexueyuan.com/project/react-native/homepage.html
  • React Native代码框架示例下载:https://github.com/facebook/react-native

react-native的原理。react-native的优点和H5类似,跨平台、低成本开发、开发速度快、动态发布、一套类似代码维护三个平台。代码结构如下图:

图片 8

H5的缺点有许多,当新技术出现时候许许多多的人都在吹嘘它的优点,到真正实用时才对它的缺点正视。H5加载大图片的时候性能会下降,大量用户访问同一个H5应用时性能会下降,响应速度比不上原生app,上网速度也不及原生app,H5不能自动处理动画上反复交互,需要借助css3、javascript。H5本质上是网页,无论是离线的还是在线的,它本质上是通过浏览器呈现到用户面前的网页,在手机上模拟得像app,网页的缺陷它无可避免。1.软、硬件的支撑问题,现在早已不是问题,这里讲出是由于2012年左右当时H5火起来时,我在FF公司看到宣讲H5时,当时许多的手机依然无法支持h5,几年过去了这个问题基本不存在了;2.性能问题,这才是H5最大的问题,原生开发对性能的支持远超H5,在用户体验上,H5的app绝对是占据下风的,app反应速度、流畅度等;3.功能问题,对某些硬件摄像头、陀螺仪、麦克风等硬件支持较差,频繁调用这些硬件,H5不容易扩展,调用速度也不如人意。

React Native项目结构介绍:

图片 9

project.png

首先index.android.js、index.ios.js、package.json是最主要的三个文件。
android和iOS文件夹基本不会动,主要是编辑index.ios.js或者index.android.js,另外node_modules文件夹是react native的一个库工程文件, 还有package.json是对整个工程的一些重要信息的说明,比如工程名称、版本号等等。

个人感觉代码编辑分成3个部分:组件声明、布局、组件样式。

原生开发依然是开发者采用最广泛的开发方式,优点十分显著。相比其他开发方式而言,原生开发可以访问设备中的所有功能,运行速度更快,性能更高,而且可以启用优秀的离线处理和存储能力等等,提供最佳的用户体验,最优质的用户界面,最华丽的交互。原生开发人员众多,开发环境成熟,有许多的开源库提供开发人员调用,可是方便实现各种设计效果。

H5话题的延伸。2010-2012年H5大火,有许多人认为可以替换原生开发,成为一种“write once,run anywhere”的开发模式,但是在许多公司的案例中就遭遇了失败,但是仅仅过去了3-4年,硬件设备的更新,软件的支持,H5又一次以不同的面目再一次火起来。这个过程十分让人唏嘘。HTML5已经出来很多年了,早在2010年,乔布斯在封杀Flash的言论中,就预言HTML5将取代Flash成为下一波技术浪潮。就算不关心技术的朋友,去翻翻手机也能感受到在pc端一直以来占据统治地位的Flash在手机端几乎不见踪影,这是从2010年以来苹果公司与Adobe公司的战争开始,苹果背后无数开发人员支持研发HTML5技术,让HTML5技术得以普及开来。2011年Adobe自己也放弃了Flash移动端的研发工作,HTML5已经被移动浏览器广泛支持,Flash已经落后于时代了。很多大公司都在推动HTML5的发展,但是也有滑铁卢,Facebook的扎克伯格是最惨痛的教训,他想要用HTML5的web app来打破ios和android的垄断,实用HTML5来代替原生App。在这件事上facebook失败了,具体表现在2013年前facebook在移动端的产品的市场表现非常一般,最后无奈宣布回归原生app的开发。Facebook在html5的试错大大打击了HTML5的实用性,但是HTML5自身的厚积薄发还是让这项技术没有没落。

最近在学习react-native,以后可能会有新感受,公司内部最近可以找个项目实战一下。

手机硬件的提升和HTML5本身的完善,使得基于HTML5的应用表现更好,iPhone对HTML5的支持更加完善,Google也完成了移动端Chrome浏览器向Chromiumnie内核的切换,大幅提升对HTML支持。很多基于HTML5的应用都在试图替代原生app,但是由于技术限制,用户体验远远不如原生app,但是某些方面HTML5提供了比原生App更好的体验,但这种体验的基础不是单纯的替代原生App,而是做一些最适合HTML5的细分应用,比如小游戏、媒体和营销类的产品。这些细分的方向能够最大程度发挥HTML5跨平台、开发成本低、开发速度快的优点,在整体产品体验上远超过原生app。HTML5和原生app并不是对立的,反而原生app需要HTML5去解决一些核心的问题,让整个移动市场更有效率。很多公司在努力推动HTML5技术,但是让HTML5重新焕发生机的是微信,利用朋友圈的私密社交,以及HTML5自身的跨平台、低成本开发、速度快等特性,不少公司利用HTML5技术在朋友圈做了一次又一次的营销。微信本身没有在HTML5技术上有什么创造性的推动,而是在HTML5的应用场景上做出了自己的不同尝试,形成了附着微信这个超级app的HTML5应用场景。HTML5的优点跨平台、低成本开发、开发速度快等优点不是最终站稳市场的根源,最终成就它的还是它自身比原生app更加优秀的特质,比如小游戏、媒体、视频、营销产品等等。目前许多app都采用hybird app 开发,在h5适合的地方展示,在其他地方使用原生开发,以规避缺点,发扬优势。

一、原生开发

图片 10

原生开发的缺点在逐渐的开发、运营过程中显现出来。开发成本高,不同平台需要定制不同的app,也就是android定制apk,ios定制app,开发人员需要多平台多语言,人力成本、时间成本较多,通用性差;上线时间不稳定,需要审核,特别是苹果审核机制,审核时间长短不一,对内容还有控制,国内Android APP市场(百度手机助手,应用宝,360市场等等)也有类似的问题;版本控制能力差,版本发布到达率无法控制,多个版本更新发布,修复bug,无法保证及时送达到用户手中;获得新版本需要重新下载安装,虽然目前有增量升级方式逐渐改变,但是随之而来的其他问题如增量升级多版本控制也是个很头疼的问题;

react-native的缺点:组件不全,第三方组件也不全,遇到某些特殊功能,需要花大力气写;性能方面也无法媲美原生,还是有一些损耗,特别是交换大数据时;IOS版本略好,androi发展较慢;ios和android代码并非通用,有可能需要维护两套代码或者在代码中做一些判断;开发人员还是需要会原生开发,不然自定义组件无法编码;

总结:新技术,开发环境和代码编码方面都比较艰涩,有可能有很多坑,但是在界面简单,三端都要求,开发成本需要降低情况下可以使用react-native。

H5有许多优点,特别针对原生开发的缺点。如: 直接在网页上调试和修改,几乎不用考虑用户机型和适配的问题,针对原生开发的平台碎片化、开发人力成本、时间成本高;版本升级优势,网页的升级与用户无关,用户无需下载更新安装,保证实时送达到用户手中;上线时间稳定、快速,不需要通过开发市场的审核,有收入分成的开发市场更是可以绕过收入分成。除此以外在视频媒体方面H5表现也十分优秀的。

二、H5开发

程序结构上,有两个工程分别是ios 、android,编译后回在相应文件夹中生成apk和app,界面代码是选中的index.android.js和index.ios.js,右侧的JS代码在这两个JS文件中几乎一模一样。

介绍react-native之前,需要先提下react,react 是facebook在2013年开源的网站ui开发的js库,react-native是用react 进行原生app开发的框架,让广大开发者使用js和react开发应用,提倡组件化开发。react-native提供一个个封装好的组件让开发者使用,也可以相关嵌套形成新的组件。使用react-native可以维护多种平台(Web,Android和IOS)的同一份逻辑核心代码来创建原生app。从代码上看结构类似,细节有差别,facebook强调的是“learn once,write everywhere”,应用前端使用js和React来开发不同平台的ui,下层核心模块编写复用业务逻辑代码,提高应用的开发效率。

总结:纯H5 app适合小游戏、媒体、视频、营销产品、介绍等功能,大部分大型app属于原生、H5混合的hybird app。

它与web app很类似,但是绝对不是web app,查看开源代码,你不会发现webview的使用,也就是本质上react-native的app不是web app 或者hybird app,而是原生控件。那它是怎么实现的呢,react-native的原理如下图:

react-native的优点:不用webview,摆脱了webview的交互和性能问题;有较强的扩展性,java端提供了基础控件,js可以自由组合使用也可以自定义组合控件;

最近工作中接触到React-Native框架,对其进行一些技术分析,结合之前了解的H5的一部分,加上自己做了很久的原生开发(十几个android app、sdk,包括2个ios), 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围,作为个人知识的记录,也作作为公司内部互相学习的分享。

图片 11

三、react-native框架

本文由时时app平台注册网站发布于编程知识,转载请注明出处:React Native创立四个应用软件

关键词: