React Native 运行环境使用简介
2018-01-10 08:41
323 查看
React Native 运行环境使用简介
React Native中文学习资料,推荐使用:http://reactnative.cn。根据在使用中碰到的坑,以下做个小小入门小结。
一、React 特点
(1)声明式设计 (2)高效:通过对DOM的模拟,最大限度的减少与DOM的交互。 (3)灵活:可以与已知的框架或库很好的配合。 (4)JSX:是js语法的扩展,不一定使用,但建议用。 (5)组件:构建组件,使代码更容易得到复用,能够很好地应用在大项目的开发中。 (6)单向响应的数据流:React实现了单向响应的数据流,从而减少了重复代码,这也是解释了它为什么比传统数据绑定更简单。
二、安装配置
1、python2.7:MAC下系统自带,Windows下需自行安装;2、NodeJS环境安装;
3、Yarn、React Native的命令行工具安装;
npm install -g yarn react-native-cli
4、测试安装;
react-native init AwesomeProject cd AwesomeProject react-native run-android/run-ios
5、生成js文件命令:
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
6、启动命令:
reactive-native start
三、集成到现有工程
1、iOS工程:1、Podfile中以subspec的形式填写所有你要集成的React Native的组件; 2、添加一个事件处理函数,用于创建一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的,而且它必须对应你在index.js中使用AppRegistry注册的模块名字。
2、Android工程:
1、 在build.gradle文件中添加com.facebook.react:react-native:+,以及一个指向node_nodules/目录中的react-native预编译库的maven路径。 2、创建一个React Native专属的Activity,在其中再创建ReactRootView
四、同原生的交互(以iOS为例)
1、通过实现RCTBridgeModule协议,原生可传递属性给JS;
2、JS调用原生方法
原生中声明方法:RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)secondsSinceUnixEpoch) { NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch]; }
JS中调用
import { NativeModules } from 'react-native'; var CalendarManager = NativeModules.CalendarManager; CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime());
3、原生调用JS
原生中声明方法:@implementation CalendarManager RCT_EXPORT_MODULE(); - (NSArray<NSString *> *)supportedEvents { return @[@"EventReminder"]; } - (void)calendarEventReminderReceived:(NSNotification *)notification { NSString *eventName = notification.userInfo[@"name"]; [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}]; } @end
JS中调用
import { NativeEventEmitter, NativeModules } from 'react-native'; const { CalendarManager } = NativeModules; const calendarManagerEmitter = new NativeEventEmitter(CalendarManager); const subscription = calendarManagerEmitter.addListener( 'EventReminder', (reminder) => console.log(reminder.name) ); ... // 别忘了取消订阅,通常在componentWillUnmount生命周期方法中实现。 subscription.remove();
4、Promises
原生中声明方法:RCT_REMAP_METHOD(findEvents, resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) { NSArray *events = ... if (events) { resolve(events); } else { reject(error); } }
JS中调用
async function updateEvents() { try { var events = await CalendarManager.findEvents(); this.setState({ events }); } catch (e) { console.error(e); } } updateEvents();
相关文章推荐
- ADS开发简介(二) 环境配置和工具使用
- 【翻译】使用VS2008开发运行在.net 2.0环境下的 ASP.NET AJAX 网站
- 使用AppServ快速建立php运行环境
- CentOS 5.5使用yum来安装LAMP(php运行环境)
- Ubuntu 9.04 下使用Apache2,mod_mono 配置asp.net 2.0 运行环境教程
- 【华磊原创】安装程序自动检测安装.Net Framework运行环境(使用InnoSetup)
- 在.NET环境下的XML应用简介(1)——使用XmlTextReader读取XML文档
- Windows7下使用IIS7与FastCGI模块配置PHP5.3.1运行环境
- 使用Cygwin模拟Linux环境安装配置运行基于单机的Hadoop
- 使用Python开发Android应用程序:第一节 在手机上配置Python运行环境
- 在VMWare Workstation上使用RedHat Linux安装和配置Hadoop群集环境05_HDFS文件系统和Mapreduce框架的启动和运行
- 使用Editplus和Dev C++配置C++的编译运行环境
- 使用Cygwin模拟Linux环境安装配置运行基于单机的Hadoop
- 设置环境变量实现使用“运行“快速打开QQ等程序
- 在Linux下使用QT环境来安装和运行WebKit
- 在SSH jdk6.0 Tomcat6.0环境中使用CXF 运行时报错
- 使用VS2008开发运行在.net 2.0环境下的 ASP.NET AJAX 网站
- Windows7下使用IIS7与FastCGI模块配置PHP5.3.1运行环境
- 安装程序自动检测安装.Net Framework运行环境(使用InnoSetup)
- 转载:使用AppServ快速建立php运行环境