記錄一下已有iOS項目嵌入RN頁面
一、以下為Debug篇幅
- cd Desktop
- mkdir RNDemo 桌面創(chuàng)建一個RNDemo的文件夾
- package.json復(fù)制到RNDemo文件夾內(nèi)
image.png
- cd RNDemo，然后運行npm add react-native react
image.png
創(chuàng)建一個iOS項目保存到當(dāng)前文件夾 pod init, pod install 安裝Pod
在Podfile里面copy腳本命令，最好是npx react-native init NewProject創(chuàng)建一個RN的新Demo, 參考里面的Podfile，我這個版本0.66，是這樣的(！這里有個注意的點，Pod的iOS版本需最低支持11.0，否則會報錯。具體低版本的引入方法沒去研究...)
image.png
然后執(zhí)行pod install
- VC Code創(chuàng)建兩個js 保存到根目錄文件夾
index.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('App1', () => App);
App.js
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
this is App
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
image.png
然后在iOS項目viewController 添加js
//
// ViewController.m
// RNDemo
//
// Created by YD_Dev_BinY on 2021/11/24.
//
#import "ViewController.h"
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTEventEmitter.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
[self initRCTRootView];
}
- (void)initRCTRootView {
NSURL *jsCodeLocation;
// jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; //手動拼接jsCodeLocation用于開發(fā)環(huán)境 //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; //release之后從包中讀取名為main的靜態(tài)js bundle
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; // 通過RCTBundleURLProvider生成，用于開發(fā)環(huán)境
//這個"App1"名字一定要和我們在index.js中注冊的名字保持一致
RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"App1" initialProperties:nil
launchOptions: nil];
self.view = rootView;
}
@end
-
info.plist 配置允許http網(wǎng)絡(luò)訪問
image.png
-
cd 到iOS項目目錄，然后npm start 運行 Metro
然后直接cmd + R運行iOS項目
我這邊運行出來頁面
image.png
參考鏈接 - React Native 混合開發(fā)(iOS篇)
二、Release篇幅。
- 在Debug環(huán)境開發(fā)調(diào)試之后，進入Release發(fā)布篇幅。
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
需要把JS代碼及圖片資源打包成 bundle 和 assets。
命令
// 這里可以在./后面自定義你想放入的路徑。先文件夾創(chuàng)建好目錄。
react-native bundle --entry-file index.js --bundle-output ./main.jsbundle --platform ios --assets-dest ./ --dev false
ps：
- 這里有個坑，因為之前Pod是10.0系統(tǒng)版本，Pod更改為11.0后，General一直沒更改為11.0，就一直報錯原生原有的Pod三方找不到。更改一下就好。
- 還有就是，嵌入RN后，Scheme選擇Release需要把Debug executable調(diào)試勾選取消。否則真機也會報錯。
- 僅限剛接觸RN新手的提醒：（筆者剛開始疑惑了一下，畢竟第一次接觸RN）
-- 第一次Debug時，原生項目模擬器運行有個Downloading的標(biāo)題。這是RN的一個機制，可以保存就更新調(diào)試。
-- 如果是Debug運行main.bunlde，模擬器導(dǎo)航那里，也是會有一個鏈接的提示。
-- 如果打包成Release版本后，就沒有這些提示。
- 熱更新的問題。因為（個人了解）codePush注冊只有100次免費下載額度，官方Pushy貌似也是收費的，個人僅7天專業(yè)版免費體驗。所有如果是原生開發(fā)的話，可以考慮自己下載Bundle資源zip. 自己下載zip并解壓，然后替換libary里面的Bundle文件路徑。
