iOS项目嵌入React Native

记录一下已有iOS项目嵌入RN页面

一、以下为Debug篇幅

1. cd Desktop
2. mkdir RNDemo 桌面创建一个RNDemo的文件夹
3. package.json复制到RNDemo文件夹内

image.png

4. cd RNDemo，然后运行npm add react-native react

image.png

5. 创建一个iOS项目保存到当前文件夹 pod init, pod install 安装Pod

6. 在Podfile里面copy脚本命令，最好是npx react-native init NewProject创建一个RN的新Demo, 参考里面的Podfile，我这个版本0.66，是这样的(！这里有个注意的点，Pod的iOS版本需最低支持11.0，否则会报错。具体低版本的引入方法没去研究...)

image.png

然后执行pod install

7. 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 (
      
        
          this is App
        
      
    );
  }
}

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 
#import 
#import 

@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

8. info.plist 配置允许http网络访问

   
   
   image.png

9. cd 到iOS项目目录，然后npm start 运行 Metro
   然后直接cmd + R运行iOS项目
   我这边运行出来页面

   
   
   image.png

参考链接 - React Native 混合开发(iOS篇)

二、Release篇幅。

1. 在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版本后，就没有这些提示。

2. 热更新的问题。因为（个人了解）codePush注册只有100次免费下载额度，官方Pushy貌似也是收费的，个人仅7天专业版免费体验。所有如果是原生开发的话，可以考虑自己下载Bundle资源zip. 自己下载zip并解压，然后替换libary里面的Bundle文件路径。