iOS项目集成RN(0)

iOS原有项目集成RN

  • 环境安装
    • RN环境搭建
      • [Node & Watchman 安装](#Node & Watchman 安装)
    • 创建新应用
    • iOS项目集成RN
      • [如果没有iOS项目,新建一个 swift, storyboard项目, 名字:RNTest](#如果没有iOS项目,新建一个 swift, storyboard项目, 名字:RNTest)
      • [新建一个 RNDemo目录,一个iOS子目录, 把iOS相关的拷到这个子目录下](#新建一个 RNDemo目录,一个iOS子目录, 把iOS相关的拷到这个子目录下)
      • 可以启动项目了
      • [如果报错RCT-Folly Time.h 文件报错](#如果报错RCT-Folly Time.h 文件报错)

环境安装

你需要提前安装好,Homebrew,Xcode, Cocoapods

RN环境搭建

Node & Watchman 安装

swift 复制代码
brew install node
brew install watchman

创建新应用

  1. 卸载全局安装的react-native-cli
swift 复制代码
npm uninstall -g react-native-cli @react-native-community/cli
  1. 创建新项目
swift 复制代码
   npx react-native init AwesomeProject

目录结构如下:

iOS项目集成RN

如果没有iOS项目,新建一个 swift, storyboard项目, 名字:RNTest

  1. 在info.plist文件中, 删除 UIApplicationSceneManifest,删除SceneDelegate.swift
    最低支持iOS系统版本改为 11.0

appDelegate.swift 更改如下:

swift 复制代码
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        let story = UIStoryboard(name: "Main", bundle: nil)
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = story.instantiateInitialViewController()
        window?.makeKeyAndVisible()

        return true
    }



}
 
  1. main.storyboard 防两个按钮,添加点击事件
swift 复制代码
import React

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        view.backgroundColor = .white
    }

    @IBAction func playGameTap(_ sender: Any) {
    }
    
    @IBAction func highScoreTap(_ sender: Any) {
        NSLog("Hello")
        guard let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios") else {return}
        let mockData:NSDictionary = ["scores":
            [
                ["name":"Alex", "value":"42"],
                ["name":"Joel", "value":"10"]
            ]
        ]

        let rootView = RCTRootView(
            bundleURL: jsCodeLocation,
            moduleName: "RNHighScores",
            initialProperties: mockData as [NSObject : AnyObject],
            launchOptions: nil
        )
        let vc = UIViewController()
        vc.view = rootView
        self.present(vc, animated: true, completion: nil)

    }
}

新建一个 RNDemo目录,一个iOS子目录, 把iOS相关的拷到这个子目录下

  1. 从AwesomeProject中的index.js, metro.config.js, package.json 拷贝到 RNDemo目录下,并执行命令
swift 复制代码
   npm install
  1. cd 到 iOS 目录执行
swift 复制代码
   pod init

Podfile 内容改为如下:

swift 复制代码
# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'RNTest' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )


  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )
  end
end

执行 pod install。

index.js 内容修改:

swift 复制代码
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

const RNHighScores = ({scores}) => {
  const contents = scores.map(score => (
    <Text key={score.name}>
      {score.name}:{score.value}
      {'\n'}
    </Text>
  ));
  return (
    <View style={styles.container}>
      <Text style={styles.highScoresTitle}>
        2048 High Scores!
      </Text>
      <Text style={styles.scores}>{contents}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
  1. 最后目录结构如下:

可以启动项目了

  1. 在RNDemo目录下 命令行执行
swift 复制代码
npm start
  1. 在iOS目录下,使用 RNTest.xcworkspace 打开运行项目

如果报错RCT-Folly Time.h 文件报错

  1. 注释代码
    //typedef uint8_t clockid_t;
  2. __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_11_0 改为
    __IPHONE_OS_VERSION_MIN_REQUIRED < __IPHONE_12_0
相关推荐
叽哥2 小时前
Flutter Riverpod上手指南
android·flutter·ios
小仙女喂得猪1 天前
2025 Android原生开发者角度的React/ReactNative 笔记整理
react native·react.js
用户091 天前
SwiftUI Charts 函数绘图完全指南
ios·swiftui·swift
YungFan1 天前
iOS26适配指南之UIColor
ios·swift
XTransfer技术1 天前
RN也有微前端框架了? Xtransfer的RN优化实践(一)多bundle架构
前端·react native
权咚2 天前
阿权的开发经验小集
git·ios·xcode
用户092 天前
TipKit与CloudKit同步完全指南
ios·swift
法的空间2 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview