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
相关推荐
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
️ 邪神1 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱13 小时前
flutter项目苹果编译运行打包上线
flutter·ios
网络安全-老纪14 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
1024小神16 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
lzhdim17 小时前
iPhone 17 Air看点汇总:薄至6mm 刷新苹果轻薄纪录
ios·iphone
安和昂18 小时前
【iOS】知乎日报第四周总结
ios
麦田里的守望者江20 小时前
KMP 中的 expect 和 actual 声明
android·ios·kotlin
老码沉思录20 小时前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
_黎明1 天前
【Swift】字符串和字符
开发语言·ios·swift