无缝衔接！将 React Native 项目集成到现有的 iOS 应用程序中

2023-10-03 13:38:10

前言

随着混合应用程序开发的兴起，将 React Native 集成到现有的 iOS 应用程序已变得越来越普遍。React Native 强大的跨平台功能使开发人员能够在不影响应用程序质量的情况下利用原生功能。在本教程中，我们将逐步指导您完成在现有的 iOS 应用程序中集成 React Native 项目的过程，从而让您将这两个强大的框架的优势融为一体。

步骤 1：项目初始化

对于新项目：

在项目文件夹中，创建 package.json 文件。

在 package.json 中添加以下内容：

{
  "name": "my-react-native-app",
  "react-native": "^0.69.1"
}

对于现有项目：

确保您已安装 react-native-cli。

导航到项目文件夹，运行：

npx react-native init ReactNativeIntegration

步骤 2：链接依赖项

对于两个场景，您都需要运行以下命令：

cd ReactNativeIntegration
npx react-native link

步骤 3：创建 React Native 应用程序

在 ReactNativeIntegration 文件夹中，创建以下目录结构：

├── index.js
└── src
    ├── App.js
    ├── index.js
    └── screens
        ├── HomeScreen.js

在 index.js 中添加以下内容：

import { AppRegistry } from 'react-native';
import App from './src/App';

AppRegistry.registerComponent('ReactNativeIntegration', () => App);

步骤 4：集成 React Native 视图

使用纯原生代码：

在 AppDelegate.m 中，添加以下代码：

#import <React/RCTRootView.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  RCTBridge *bridge = [[RCTBridge alloc] init];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"ReactNativeIntegration" initialProperties:nil];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  return YES;
}

使用 Swift UI：

在 SceneDelegate.swift 中，添加以下代码：

import SwiftUI
import React

class ReactNativeHostingController: UIHostingController<ContentView> {
    private let rootView: RCTRootView

    override init(rootView: ContentView) {
        // Create a bridge to communicate with React Native
        let bridge = RCTBridge()
        // Create the root view for React Native
        self.rootView = RCTRootView(bridge: bridge, moduleName: "ReactNativeIntegration", initialProperties: nil)
        super.init(rootView: rootView)
    }

    @objc required dynamic init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

struct ContentView: View {
    var body: some View {
        ReactNativeHostingController(rootView: self)
    }
}