React Native 初步理解和使用

参考demo

中国版 github 地址

参考资料

搭建开发环境

进阶之原生混合与数据通信开发详解 参考

REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 参考

React Native 中组件的生命周期

idea配置

file->import settings->(选jar包)

React Native 插件jar

环境搭建

Ios

这个没啥特别 暂时未补全

android

真机调试有巨大的坑

小米手机报错解决

设置 ->更多设置-> miui优化（关闭）

gradle-wrapper.properties 设置

distributionUrl=https\://services.gradle.org/distributions/gradle-2.2-all.zip

build.gradle 设置

classpath 'com.android.tools.build:gradle:1.2.3'

本地化

项目文件结构截图

ps:注意资源文件引用

//打包命令
react-native bundle --entry-file index.ios.js --bundle-output ./ios/rn/main.jsbundle --platform ios --assets-dest ./ios/rn --dev false

  NSURL *jsCodeLocation;
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
  
  //离线包 打包用
//  jsCodeLocation = [NSURL URLWithString:[[NSBundle mainBundle] pathForResource:@"index.ios.jsbundle" ofType:nil inDirectory:@"bundle"]];
  
  //在线包 测试用
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"djcars"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  rootView.backgroundColor = [UIColor whiteColor];
  
  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

IOS与RN交互

//*.h
#import <Foundation/Foundation.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>

//代理
@protocol TCReactNativeBridgeDelegate <NSObject>
@optional
-(void)rn_leftBarButtonClicked;
@end


@interface ReactNativeBridge : NSObject <RCTBridgeModule>

@property (nonatomic, weak)id <TCReactNativeBridgeDelegate> delegate;

@property (nonatomic, strong)NSString* controllerName;

+ (instancetype)sharedManager;

@end

//*.m
//
//  ReactNativeBridge.m
//  djcars
//
//  Created by 周启睿 on 17/3/13.
//  Copyright © 2017年 Facebook. All rights reserved.
//

#import "ReactNativeBridge.h"


@implementation ReactNativeBridge

@synthesize bridge = _bridge;

//此函数是为了测试OC->JS过程，触发事件的函数
RCT_EXPORT_METHOD(emitterO2J)
{
  [self ocToJsFun];
}


#pragma mark - 单列
+ (instancetype)sharedManager {
  static ReactNativeBridge *_sharedManager = nil;
  static dispatch_once_t oncePredicate;
  dispatch_once(&oncePredicate, ^{
    _sharedManager = [[self alloc] init];
  });
  
  return _sharedManager;
}

#pragma mark - oc触发react native js lister
- (void)ocToJsFun
{
//  var ocToJsFun = NativeAppEventEmitter.addListener('eventName',
//                                                    (para) => {
//                                                      console.log('被OC触发','字典数据:\n name:'+para.name+'\n age:'+para.age);
//                                                    }
//                                                    );
//  ocToJsFun.remove();
  NSDictionary * direct =@{@"name": @"Himi",@"age": @12};
  [self.bridge.eventDispatcher sendAppEventWithName:@"eventName" body:direct];
}


#pragma mark - 不带放回js 调用类方法

RCT_EXPORT_MODULE();
//桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，必须通过回调或者触发事件来进行
RCT_EXPORT_METHOD(jsToOcFunc:(NSString *)dataString dateNumber:(int)dateNumber)
{ 
//  var nativeClass = NativeModules.ReactNativeBridge;
//  nativeClass.jsToOcFunc('Himi', 12321);
  NSLog(@"js call iOS function j2oFun1\n dataString: %@ |dateNumber :%d",dataString,dateNumber);
}


#pragma mark - 带返回js 调用类方法
//带回调函数 RCTResponseSenderBlock ，提供将返回值传回给js
//RCTResponseSenderBlock 只接受一个参数->传递给JavaScript回调函数的参数数组
RCT_EXPORT_METHOD(jsToOcWithCallback:(NSString *)jsString callback:(RCTResponseSenderBlock)callback)
{

//  var nativeClass = NativeModules.ReactNativeBridge;
//  nativeClass.jsToOcWithCallback('Himi',(error,callBackEvents)=>{
//    if (error) {
//      console.error(error);
//    } else {
//      Alert.alert('J2O带返回值', '数组的三个值：\n[0]:'+callBackEvents[0]+'\n[1]:'+callBackEvents[1]+'\n');
//    }
//  });
  
  NSLog(@"js call iOS function:  j2oCallbackEvent \n jsString:%@",jsString);
  NSArray *events = [[NSArray alloc] initWithObjects:@"Himi",@"12321", nil];
  callback(@[[NSNull null], events]);
}

@end