簡介：
? ? ? ?本文歸納iOS原生項(xiàng)目下集成ReactNative（簡稱RN）的過程，此外，針對(duì)Xcode9中iOS8和iOS9 RSA公鑰的保存問題，使用RN中的RSA加解密替代原生中RSA加解密。
????????Xcode9中iOS8和iOS9 RSA公鑰的保存問題，SecItemAdd return?OSStatus noErr，but result is NULL，經(jīng)過測(cè)試發(fā)現(xiàn)該問題出現(xiàn)在iOS8和iOS9系統(tǒng)中，所以準(zhǔn)對(duì)此問題進(jìn)行了改造升級(jí)。? ? ? ??
配置環(huán)境RN環(huán)境：
Node環(huán)境，包括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、執(zhí)行 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'
....
執(zhí)行pod install
正常情況下Library目錄下會(huì)出現(xiàn)
需手動(dòng)配置Header Search Path，否則會(huì)出現(xiàn)頭文件路徑問題
配置到此完成，Build->Run。
原生與ReactNative的通信
在AppDelegate中‘注冊(cè)’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
“原生注冊(cè)”
RCT_EXPORT_MODULE();//關(guān)鍵
- (NSArray *)supportedEvents {
? ? return @[@"rsaEncrypt",@"rsaDncrypt"]; //這里返回的將是你要發(fā)送的消息名的數(shù)組。
}
- (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實(shí)現(xiàn)
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){
? ? ? ? //對(duì)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執(zhí)行pod update
