记录一下已有iOS项目嵌入RN页面
一、以下为Debug篇幅
- cd Desktop
- mkdir RNDemo 桌面创建一个RNDemo的文件夹
- package.json复制到RNDemo文件夹内
image.png
- cd RNDemo，然后运行npm add react-native react
image.png
创建一个iOS项目保存到当前文件夹 pod init, pod install 安装Pod
在Podfile里面copy脚本命令，最好是npx react-native init NewProject创建一个RN的新Demo, 参考里面的Podfile，我这个版本0.66，是这样的(！这里有个注意的点，Pod的iOS版本需最低支持11.0，否则会报错。具体低版本的引入方法没去研究...)
image.png
然后执行pod install
- VC Code创建两个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用于开发环境 //jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; //release之后从包中读取名为main的静态js bundle
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; // 通过RCTBundleURLProvider生成，用于开发环境
//这个"App1"名字一定要和我们在index.js中注册的名字保持一致
RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName: @"App1" initialProperties:nil
launchOptions: nil];
self.view = rootView;
}
@end
-
info.plist 配置允许http网络访问
image.png
-
cd 到iOS项目目录，然后npm start 运行 Metro
然后直接cmd + R运行iOS项目
我这边运行出来页面
image.png
参考链接 - React Native 混合开发(iOS篇)
二、Release篇幅。
- 在Debug环境开发调试之后，进入Release发布篇幅。
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
需要把JS代码及图片资源打包成 bundle 和 assets。
命令
// 这里可以在./后面自定义你想放入的路径。先文件夹创建好目录。
react-native bundle --entry-file index.js --bundle-output ./main.jsbundle --platform ios --assets-dest ./ --dev false
ps：
- 这里有个坑，因为之前Pod是10.0系统版本，Pod更改为11.0后，General一直没更改为11.0，就一直报错原生原有的Pod三方找不到。更改一下就好。
- 还有就是，嵌入RN后，Scheme选择Release需要把Debug executable调试勾选取消。否则真机也会报错。
- 仅限刚接触RN新手的提醒：（笔者刚开始疑惑了一下，毕竟第一次接触RN）
-- 第一次Debug时，原生项目模拟器运行有个Downloading的标题。这是RN的一个机制，可以保存就更新调试。
-- 如果是Debug运行main.bunlde，模拟器导航那里，也是会有一个链接的提示。
-- 如果打包成Release版本后，就没有这些提示。
- 热更新的问题。因为（个人了解）codePush注册只有100次免费下载额度，官方Pushy貌似也是收费的，个人仅7天专业版免费体验。所有如果是原生开发的话，可以考虑自己下载Bundle资源zip. 自己下载zip并解压，然后替换libary里面的Bundle文件路径。
