@H_301_1@React Native的iOS开发以及崩溃收集
@H_301_1@
@H_301_1@简介
@H_301_1@React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
@H_301_1@React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once,write anywhere)
@H_301_1@Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
@H_301_1@
@H_301_1@准备
@H_301_1@安装
@H_301_1@iOS只能MAC下开发,需要Xcode; Android三个平台都可开发,需要Android Studio。
@H_301_1@
@H_301_1@必需的软件
@H_301_1@1.Homebrew
@H_301_1@Homebrew,Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件
@H_301_1@译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local
目录不可写的权限问题。可以使用下面的命令修复:
@H_301_1@
@H_301_1@2.Node
@H_301_1@使用Homebrew来安装Node.js.
@H_301_1@3.ReactNative的命令行工具(react-native-cli)
@H_301_1@React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
@H_301_1@如果你看到EACCES:permission denied
这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local
目录的所有权:
@H_301_1@4.Xcode
@H_301_1@现在的版本需要Xcode7.0或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
@H_301_1@注: android需要安装AndroidStudio工具
@H_301_1@验证
@H_301_1@同时会生成iOS和android的相关项目
@H_301_1@
@H_301_1@index.ios.js和index.android.js是写js脚本的地方
@H_301_1@
@H_301_1@ios下是Xcode工程,android下是gradle工程
切换到工程目录下,运行iOS工程
效果如下:
@H_301_1@
@H_301_1@如何开发
@H_301_1@组件是React Native应用的基石,比如:
@H_301_1@1.Image对应iOS下的UIImage,Android下的ImageView
@H_301_1@2.ActivityIndicatorIOS对应iOS下的进度指示器:UIActivityIndicatorView
@H_301_1@3.ToastAndroid对应Android下的悬浮提示框:Toast
那么一个典型的RN应用的用户界面(UI)是如何产生的呢?
首先是声明组件(以及嵌套组件),然后组件被转换为了对应平台的原生UI组件。
@H_301_1@
@H_301_1@核心组件
@H_301_1@下面介绍的是一些React Native应用中常用的核心组件,它们既可以单独使用,也可以组合使用。
@H_301_1@他们是iOS和Android可以共用的组件,包括:TextImageViewTextInputListView
@H_301_1@
@H_301_1@总结@H_301_1@: 这里界面的书写,跟WPF的XAML文件,android的xml文件比较类似。
WPF的Xaml:
@H_301_1@
@H_301_1@
@H_301_1@各平台有关的组件:
@H_301_1@使用React Native,你可以使用标准的平台组件,例如iOS的UITabBar或安卓的Drawer,他们不能跨平台使用,只能各自使用各自的。这使你的app获得平台一致的视觉效果和体验,并且获得最佳的性能和流畅性。 使用对应的Reactcomponent,就可以轻松地把这些原生组件整合到你的React Native应用中, 例如TabBarIOS和DrawerLayoutAndroid。DrawerLayoutAndroid封装了平台DrawerLayout
(仅限安卓平台)的React组件。
@H_301_1@
@H_301_1@原生UI组件
@H_301_1@React Native已经封装了大部分最常见的组件,譬如ScrollView
和TextInput
,但不可能封装全部组件。这些的话就需要我们自己去封装使用。
@H_301_1@原生模块
@H_301_1@有时候App需要访问平台API,但React Native可能还没有相应的模块封装;或者你需要复用Objective-C、Swift或C++代码,而不是用JavaScript重新实现一遍;又或者你需要实现某些高性能、多线程的代码,譬如图片处理、数据库、或者各种高级扩展等等。
@H_301_1@我们把React Native设计为可以在其基础上编写真正的原生代码,并且可以访问平台所有的能力。这是一个相对高级的特性,我们并不认为它应当在日常开发的过程中经常出现,但具备这样的能力是很重要的。如果React Native还不支持某个你需要的原生特性,你应当可以自己实现该特性的封装。
@H_301_1@
@H_301_1@创建应用
@H_301_1@切换到某一个目录下,在命令行下执行:
@H_301_1@react-native init SampleAppMovies
@H_301_1@1.ui有关的基本在js里编写,有现成的react组件就是用现成的,包括跟iOS,Android各平台有关的组件;没有现成的,就自己封装。
@H_301_1@2.逻辑代码能在js里实现的,就js书写,如果某些跟平台有关的功能react native没实现,则开发原生模块,相互调用
@H_301_1@
@H_301_1@总结
@H_301_1@1.ios和Android确实有很多代码可以通用
@H_301_1@2.ios和android代码并非完全通用,有可能会需要维护两套,或者在代码内做一些判断。并非网上大家说的,写一次代码,多端通用,尤其是实际开发的时候,还是需要了解底层原理,自己开发跟原生桥接的组件
不过跟”Learn once,writeanywhere”理念倒是符合的,React Native不强求一份原生代码支持多个平台,所以不提“Write once,run anywhere”(Java)。
@H_301_1@3.一个比较明显的使用场景:热更新
@H_301_1@原理: 要实现RN的脚本热更新,我们要搞明白RN是如何去加载脚本的。
在编写业务逻辑的时候,我们会有许多个js文件,打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件,所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里,启动App时会第一时间加载bundle文件,所以脚本热更新要做的事情就是替换掉这个bundle文件。
@H_301_1@崩溃收集
@H_301_1@1.在Xcode工程里写的原生代码,可以直接使用iOS崩溃收集机制,比如三方的SDK:云捕
@H_301_1@2.js中的代码,崩溃收集机制如下,单独开发个SDK即可
参考地址: