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
相关推荐
2401_8658548813 小时前
iOS应用想要下载到手机上只能苹果签名吗?
后端·ios·iphone
HackerTom1 天前
iOS用rime且导入自制输入方案
ios·iphone·rime
良技漫谈1 天前
Rust移动开发:Rust在iOS端集成使用介绍
后端·程序人生·ios·rust·objective-c·swift
2401_852403551 天前
高效管理iPhone存储:苹果手机怎么删除相似照片
ios·智能手机·iphone
少恭写代码1 天前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
星际码仔2 天前
【动画图解】是怎样的方法,能被称作是 Flutter Widget 系统的核心?
android·flutter·ios
番茄小酱0012 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
emperinter2 天前
WordCloudStudio:AI生成模版为您的文字云创意赋能 !
图像处理·人工智能·macos·ios·信息可视化·iphone
关键帧Keyframe2 天前
音视频面试题集锦第 8 期
ios·音视频开发·客户端
pb82 天前
引入最新fluwx2.5.4的时候报错
flutter·ios