一、React Native简介
React Native是由facebook开发的一套框架，可以通过它使用类似前端开发的方式来开发原生的IOS/android应用。其与用html5构建的界面的最大区别在于react native所构建的界面实质上是使用的平台本身原生的native控件，所以它会比html5界面的操作体验会好很多。理解上可以把React native当成一个转换桥，他会将用JavaScript等前端代码编写的界面转换成各平台原生的界面。
跨平台吗？那只要开发一套代码就可以搞定IOS/Android两个平台了。其实不然，React Native并不能完全做到类似java那样的“一次开发，到处运行”的跨平台体验。它宣称的是“一次学习，到处编写”，也就是说，如果你想开发一个应用，Android和IOS平台都要支持，那么你可以使用React Native技术分别为IOS和Android各开发一套。也就是两套代码一套技术。因为现在的React Native库中除了一些抽象极强的通用组件外剩下的有将近%50的组件是平台相关的，不同的平台使用不同的组件，所以你没法做到完全的跨平台。当然只是部分跨平台式的代码复用是可以的，只要程序结构设计合理将model层进行剥离复用当然没有问题。
二、React Native使用场景分析
1、整个项目全部采用React Native,这种方式现在好像也就作为创始人的facebook在这么玩。虽说版本更新到现在整个框架越来越趋于成熟稳定，但是如果作为一名原生的native开发者来说，初次接触并不会有太大的把握去熟练的运用它。特别是如果有需求涉及到一些复杂的界面交互显示的话那现在版本的React Native还真不一定能实现。因为其依赖于原生控件的接口暴露，有些控件的接口现在版本的React Native还没有实现出来，更别说一些平台语言特性的东西，比如IOS里面的使用KVO的形式监听某个控件属性的变化来实现各种联动动画效果。不谈动画如果只是用其来实现一些复杂的动态布局，那仅仅dom操作这一项估计就够开发人员头疼的了。而原生的开发方式在这一块的优势还是很明显了，不止有大量成熟的第三方UI框架可以使用，而且不必被react native没能暴露出的原生控件接口所限制。所以就现阶段来说如果你只是需要开发一个比较简单的应用，里面不会有复杂的界面布局或交互那么你才可以选择全部用React native来开发你的app, 否则并不介意你这么做。
2、部分使用React Native， 这种方式在现阶段应该是使用的最为广泛的方式，个人觉得也是最科学的方式。 如果界面和交互方式比较简单，同时需要保持较高频率的更新，或者是作为一个试水功能看看用户反应，不需要做很复杂的功能界面，那么使用React Native是非常合适的。与原生开发相同的用户交互体验，同时使用的是类似前端的开发方式可以一定程度上提高开发效率，还能保持热更新，一举三得值得拥有。现在淘宝、携程、QQ空间客户端也都在部分功能上使用了React Native。
三、React Native的两种实施机制
1、使用node js服务端来提供界面加载服务与客户端关联，因为我们的界面构建原始代码是放在服务端的，客户端在加载React native界面时会访问服务端获取“编译”后的代码，但是这种方式有个前提便是客户端必须要有网络支持，如果用户处于无网状态下就只能显示空白界面了。当然大部分情形并没有什么不妥，如果我们的app在业务上本来就是依赖于网络去服务端获取数据，无网情况下无法发送网络请求获取数据时当然只能显示空白界面。但是还有一些情况是另外，比如用户现在打开的是不需要网络去请求数据的界面呢，比如设置界面或者是本地缓存的数据展示界面等。这时候因为界面构建代码是放在网络服务端的，所以就算业务上不需要网络数据，但是界面却依赖于网络。当然这种方式的好处就是更新方便，安装包相对较小。IOS代码如下：
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Test"
initialProperties:nil
launchOptions:launchOptions];
2、第二种方式就是将服务端“编译”好了的中间代码直接放在客户端来实现本地加载，这样就可以不依赖于网络去加载界面了。缺点是版本的更新就需要升级客户端来完成。（理论上可以尝试在服务端提供一个文件传输接口，每次有更新则请求最新“编译”好的文件替换进原有的文件中来实现热更新，但是这种方式官方文档里找不到，所以需要自己去尝试，后期试验后再补充这块的内容）。IOS代码如下：
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Test"
initialProperties:nil
launchOptions:launchOptions];
可以看到两种方式的差别就是加载地址一个是网络地址，一个是本地文件地址而已。最后顺便提一下，如果IOS端在React Native代码中使用require('image!image_name')加载本地资源图片时务必要保证xcassets集中的每个image set的名称和图片的名称一致，否则将读取不到图片。
以上就是最近学习React Native的一些个人总结，如有错误之处还请多多指正，后期我还会更新一下在实际项目中使用React Native的经验，希望能与大家多多交流。
网友评论