ReactNative與iOS的混編
通訊
ReactNative與iOS的通訊
這里頭很詳細
嵌入
iOS原生調(diào)用嵌入ReactNative
iOS原生調(diào)用嵌入ReactNative（English）
1. cd到項目的根目錄下
cd到項目的根目錄下
2. 添加依賴包-->到了這里，有兩個選擇(推薦第二個)
選擇 ① :(官方)
（1）根據(jù)下圖哟旗，創(chuàng)建package.json,這個是包含著你要抓取的依賴包的版本等信息,相當(dāng)于請求參數(shù),去請求一個react_native對應(yīng)的資源包
添加package.json
(2) 在終端運行 (此時終端還在項目的根目錄上)
$ npm install
選擇② ：
在你的舊項目或者在任意路徑上運行:
react-native init #任意空項目名
創(chuàng)建新的空項目坐搔，把項目中的 node_modules文件夾整個復(fù)制到你的項目的根目錄中
ps:
無論哪種方法宰闰，目的都是拿到依賴包node_modules
集成cocoaPod
集成cocoapod钢拧，不會請百度或者簡書搜索（iOS開發(fā)者的基本技能,不廢話忱反，看到這里不會的話铺遂，在此斷點淘讥，請調(diào)用了相關(guān)知識再回調(diào)回來）。
在podfile中泻拦，增加以下代碼
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依賴毙芜。
]
end
注意：path對應(yīng)著react-native的路徑，有的人不喜歡把node_modules放在根目錄争拐，則對應(yīng)自己需要調(diào)整path的路徑內(nèi)容
react-native代碼準(zhǔn)備
1) 創(chuàng)建一個文件夾來保存你的React代碼腋粥，然后創(chuàng)建一個index.ios.js文件:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
2）導(dǎo)入相關(guān)靜態(tài)了庫，添加相關(guān)frameworks文件:
按步驟添加
在react-native注冊輸出
在index.ios.js中編寫：
在index.ios.js中編寫
在原生項目中導(dǎo)入
導(dǎo)入reactNative的內(nèi)容
程序的啟動
一旦使用了rn架曹，則程序的啟動會有變化：
-
設(shè)置服務(wù)器權(quán)限：
打開權(quán)限 - 終端命令進入進入項目根目錄隘冲，執(zhí)行
$ react-native start
- 服務(wù)器打開后，直接在xcode上command+R 運行程序
ps:
如果build錯誤：
_refreshControl報錯
解決方法:
添加上面代碼
運行結(jié)果
原生頁
RN頁面
ReactNative嵌入iOS原生
1音瓷、創(chuàng)建原生模塊对嚼，實現(xiàn)“RCTBridgeModule”協(xié)議
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface NativeLogin : NSObject <RCTBridgeModule>
@end
2夹抗、在原生的類中實現(xiàn)
#import "NativeLogin.h"
@implementation NativeLogin
//導(dǎo)出模塊
RCT_EXPORT_MODULE(); //此處不添加參數(shù)即默認(rèn)為這個OC類的名字
//導(dǎo)出方法绳慎，橋接到j(luò)s的方法返回值類型必須是void
RCT_EXPORT_METHOD(pushToLoginWithTitle:(NSString *)name)
{
NSLog(@"loginTitle:%@",name);
//在此處可以跳轉(zhuǎn)你想跳轉(zhuǎn)的頁面
UINavigationController *controller = (UINavigationController*)[[[UIApplication sharedApplication] keyWindow] rootViewController];
UIViewController *loginVC = [[UIViewController alloc] init];
login.title = name;
[controller pushViewController:loginVC animated:YES];
}
@end
3、js文件中調(diào)用
//創(chuàng)建原生模塊實例
var loginModule = require('react-native').NativeModules.NativeLogin;
//方法調(diào)用
loginModule. pushToLoginWithTitle('Login');
