React Native的iOS开发步骤以及崩溃收集

 React Native的iOS开发以及崩溃收集

 

简介

React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。

React Native着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)

Facebook已经在多项产品中使用了React Native，并且将持续地投入建设React Native。

 

准备

安装

iOS只能MAC下开发,需要Xcode; Android三个平台都可开发,需要Android Studio。

 

必需的软件

1.Homebrew

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件

 

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

 

2.Node

使用Homebrew来安装Node.js.

3.ReactNative的命令行工具(react-native-cli)

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

如果你看到EACCES:permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

 

4.Xcode

React Native现在的版本需要Xcode 7.0或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。

注: android需要安装AndroidStudio工具

验证

生成一个react-native工程

react-native init XXXXX

同时会生成iOS和android的相关项目

 

index.ios.js和index.android.js是写js脚本的地方

 

ios下是Xcode工程，android下是gradle工程

切换到工程目录下，运行iOS工程

效果如下:

如何开发

组件是React Native应用的基石，比如：

1.Image对应iOS下的UIImage，Android下的ImageView

2.ActivityIndicatorIOS对应iOS下的进度指示器:UIActivityIndicatorView

3.ToastAndroid对应Android下的悬浮提示框:Toast

那么一个典型的RN应用的用户界面(UI)是如何产生的呢？

首先是声明组件（以及嵌套组件），然后组件被转换为了对应平台的原生UI组件。

 

核心组件

下面介绍的是一些React Native应用中常用的核心组件，它们既可以单独使用，也可以组合使用。

他们是iOS和Android可以共用的组件，包括:Text Image View TextInput ListView

总结: 这里界面的书写，跟WPF的XAML文件，android的xml文件比较类似。

WPF的Xaml：

 

Android界面布局文件:

 

各平台有关的组件:

使用React Native，你可以使用标准的平台组件，例如iOS的UITabBar或安卓的Drawer，他们不能跨平台使用，只能各自使用各自的。这使你的app获得平台一致的视觉效果和体验，并且获得最佳的性能和流畅性。 使用对应的Reactcomponent，就可以轻松地把这些原生组件整合到你的React Native应用中， 例如TabBarIOS和DrawerLayoutAndroid。DrawerLayoutAndroid封装了平台DrawerLayout（仅限安卓平台）的React组件。

      

原生UI组件

React Native已经封装了大部分最常见的组件，譬如ScrollView和TextInput，但不可能封装全部组件。这些的话就需要我们自己去封装使用。

原生模块

有时候App需要访问平台API，但React Native可能还没有相应的模块封装；或者你需要复用Objective-C、Swift或C++代码，而不是用JavaScript重新实现一遍；又或者你需要实现某些高性能、多线程的代码，譬如图片处理、数据库、或者各种高级扩展等等。

我们把React Native设计为可以在其基础上编写真正的原生代码，并且可以访问平台所有的能力。这是一个相对高级的特性，我们并不认为它应当在日常开发的过程中经常出现，但具备这样的能力是很重要的。如果React Native还不支持某个你需要的原生特性，你应当可以自己实现该特性的封装。

 

创建应用

切换到某一个目录下，在命令行下执行:

react-native init SampleAppMovies

1.ui有关的基本在js里编写，有现成的react组件就是用现成的，包括跟iOS，Android各平台有关的组件；没有现成的，就自己封装。

2.逻辑代码能在js里实现的，就js书写，如果某些跟平台有关的功能react native没实现，则开发原生模块，相互调用

 

总结

1.ios和Android确实有很多代码可以通用

2.ios和android代码并非完全通用，有可能会需要维护两套，或者在代码内做一些判断。并非网上大家说的，写一次代码，多端通用，尤其是实际开发的时候，还是需要了解底层原理，自己开发跟原生桥接的组件

不过跟”Learn once, writeanywhere”理念倒是符合的，React Native不强求一份原生代码支持多个平台，所以不提“Write once, run anywhere”（Java）。

3.一个比较明显的使用场景:热更新

原理: 要实现RN的脚本热更新，我们要搞明白RN是如何去加载脚本的。
在编写业务逻辑的时候，我们会有许多个js文件，打包的时候RN会将这些个js文件打包成一个叫index.android.bundle(ios的是index.ios.bundle)的文件，所有的js代码(包括rn源代码、第三方库、业务逻辑的代码)都在这一个文件里，启动App时会第一时间加载bundle文件，所以脚本热更新要做的事情就是替换掉这个bundle文件。

崩溃收集

1.在Xcode工程里写的原生代码，可以直接使用iOS崩溃收集机制，比如三方的SDK：网易云捕

2.js中的代码，崩溃收集机制如下，单独开发个SDK即可

注意:

上面的方法尽管可以截获全局错误，但如果错误来自于render()函数或者组件的生命周期，你的应用可能也无法从错误状态恢复并继续运行，如果你试图继续运行，可能会发生更多的错误。因此建议此方法只用于错误收集和合理的提示，而不要当做一般性的错误处理办法。

参考地址:

React Native中文网

小谈React、React Native、React Web

Application Error and Crash Reports for React Native

React Native官方文档