简介：
本文归纳iOS原生项目下集成ReactNative（简称RN）的过程，此外，针对Xcode9中iOS8和iOS9 RSA公钥的保存问题，使用RN中的RSA加解密替代原生中RSA加解密。
Xcode9中iOS8和iOS9 RSA公钥的保存问题，SecItemAdd return OSStatus noErr，but result is NULL，经过测试发现该问题出现在iOS8和iOS9系统中，所以准对此问题进行了改造升级。
配置环境RN环境：
Node环境，包括npm、yarn等配置不在此赘述.....
1、package.json中的配置
"react": "16.0.0-alpha.12",
"react-native": "0.48.4",
2、安装crypto-js，AES加解密
npm install crypto-js --save
3、安装rn-nodeify
参考：https://github.com/tradle/rn-nodeify
npm i --save react-native-crypto
#install peer deps
npm i --save react-native-randombytes
react-native link react-native-randombytes
#install latest rn-nodeify
npm i --save-dev mvayngrib/rn-nodeify
#install node core shims and recursively hack package.json files
#in ./node_modules to add/update the "browser"/"react-native" field with relevant mappings
./node_modules/.bin/rn-nodeify --hack --install
4、执行 react-native link
5、使用CocoaPods配置ReactNative
根目录Podfile，
....
pod'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'CxxBridge',
'DevSupport',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
]
pod'Yoga', :path => './node_modules/react-native/ReactCommon/yoga'
pod'DoubleConversion', :podspec => './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod'GLog', :podspec => './node_modules/react-native/third-party-podspecs/GLog.podspec'
pod'Folly', :podspec => './node_modules/react-native/third-party-podspecs/Folly.podspec'
....
执行pod install
正常情况下Library目录下会出现
需手动配置Header Search Path，否则会出现头文件路径问题
配置到此完成，Build->Run。
原生与ReactNative的通信
在AppDelegate中‘注册’RN
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];//debug模式
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main"withExtension:@"jsbundle"];//离线模式
声明ASTReactModel
#import <React/RCTEventEmitter.h>
#import <React/RCTBridgeModule.h>
#import <React/RCTEventDispatcher.h>
#import <React/RCTLog.h>
@interface ASTReactModel : RCTEventEmitter
...
@end
“原生注册”
RCT_EXPORT_MODULE();//关键
- (NSArray *)supportedEvents {
return @[@"rsaEncrypt",@"rsaDncrypt"]; //这里返回的将是你要发送的消息名的数组。
}
- (void)startObserving {
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(emitrsaEncrypt:)
name:@"rsaEncryptEmitted"
object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self
selector:@selector(emitrsaDncrypt:)
name:@"rsaDncryptEmitted"
object:nil];
}
- (void)stopObserving {
[[NSNotificationCenter defaultCenter] removeObserver:self];
}
- (void)emitrsaEncrypt:(NSNotification*)notification {
[self sendEventWithName:@"rsaEncrypt" body:notification.object];
self.cBlock= notification.object[@"block"];
}
- (void)emitrsaDncrypt:(NSNotification*)notification {
[self sendEventWithName:@"rsaDncrypt" body:notification.object];
}
RN实现
import {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules,
NativeEventEmitter,
Alert,
} from 'react-native';
var ASTReactModelFromNative = NativeModules.ASTReactModel;
const managerEmitter = new NativeEventEmitter(ASTReactModelFromNative);
componentWillMount(){
subscription_rsaEncrypt = managerEmitter.addListener(
'rsaEncrypt',
(params) => {
this.rsaEncrypt(params.value, params.publicKey, params.privkey);
}
);
subscription_rsaDncrypt = managerEmitter.addListener(
'rsaDncrypt',
(params) => {
this.rsaDncrypt(params.value, params.publicKey);
}
);
}
RSA&AES加解密
static RsaEncrypt(value,publicKey,privkey){
//对AES加密用到的key加密
var randomStr = value;//this.randomWord(false,16);
var encrypt = new RSA.JSEncrypt();
encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----'+'\n' + publicKey + '\n'+'-----END PUBLIC KEY-----');
var encrypted = encrypt.encrypt(randomStr);
return encrypted;
}
PS：遇到的问题
pod install失败
error: RPC failed;
curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF fatal: index-pack failed
pod过期，更新pod执行pod update
