iOS 集成React Native超强实用入门笔记

环境安装
 
1.homebrew安装, 官方:https://brew.sh/
  
1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

 如果官方的方式安装不了,参考:https://www.cnblogs.com/xiaopin/p/12941251.html

2.Node安装:
1
brew install node

  

3.watchman安装:
1
brew install watchman

  

4.Node工具源切换
1
2
3
4
5
#淘宝
npx nrm use taobao
#或
#官方源
npx nrm use npm

  

5.yarn 安装,替换npm的工具,加速node模块的下载
  
1
npm install -g yarn

 

6.安装xcode, 并在 Xcode > Preferences > Locations > Command Line Tools配置一个Xcode
 
创建RN项目
1.创建RN新项目,创建一个默认最新版本RN的项目,或者指定RN版本项目
1
npx react-native init 项目名称<br><br>#npx react-native init 项目名称 --version 0.63.3

  

2.编译运行
1
2
3
4
cd AwesomeProject
yarn ios
#或者
yarn react-native run-ios

  正常情况下启动模拟器可以正常运行

 
将RN继承到现有项目
用官方的教程方式步骤集成到现有项目有问题,无法正确的Pod install类库,也没人更新,一万个草泥马,整死人!抛弃官方教程,看我的:
 
1.构建RN目录结构,用默认方式创建将一个RN项目,把主要的几个文件和目录,复制到出来,如下:
1
2
3
4
5
6
MyProject
    App.js
    app.json
    index.js
    ios
    package.json

 

2.修改app.json, 改成自己的项目名称

1
2
3
4
{
  "name": "MyProject",
  "displayName": "MyProject"
}

  

3.修改package.json, name改成自己的项目名称, 指定项目版本,指定引用的React-Native版本,参考复制过来的东西,但是用下面这个几个配置就可以了

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "MyProject",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  },
  "dependencies": {
    "react-native": "^0.63.3"
  }
}

  

3.如果用了git管理代码,把node_modules/目录记录到.gitignore忽略文件中
4.在ios目录下面,创建一个自己的iOS项目,可以用Swift,OC,目录下创建或者从其他项目中复制一个Podfile文件过来
5.Podfile配置 【重点问题】,PS: 一万个草泥马的根源
1
2
3
4
5
6
7
8
9
10
11
12
13
14
source 'https://github.com/CocoaPods/Specs.git'
 
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
   
platform :ios ,'10.0'
use_frameworks!
 
target 'MyProject' do
 
  config = use_native_modules!
 
  use_react_native!(:path => config["reactNativePath"])
end
 
然后在命令行中:pod install一下,集成到现有项目就完成了
 

posted @   PPDev  阅读(743)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
点击右上角即可分享
微信分享提示