likes
comments
collection
share

ReactNative环境搭建及开发流程之IOS

作者站长头像
站长
· 阅读数 42

一、简述

新到公司发现有RN项目😢？环境搭建不知道如何下手😢？别着急😄！本文将手把手教你如何搭建RN环境（IOS）

由于外网限制，在此过程中可能导致下载不顺利😢，如果想要丝滑的完成整个环境的搭建，一定要准备一个代理软件！!

当我们修改.zshrc 或.bash_profil文件后，想要生效记得source一下

系统信息

我的电脑信息：

  • MacBook Pro 13英寸 2022
  • 芯片：Apple M2
  • macOS： Sonoma 14.4.1

我的最终文件配置： 后期会一步一步教大家如何配置~😄

ReactNative环境搭建及开发流程之IOS

准备

 // 终端输入
 defaults write com.apple.finder AppleShowAllFiles TRUE
 // 默认显示苹果所有文件 true
 killall Finder
 // 这一步相当于确定
  • 连接VPN代理，并设置终端代理
// 终端输入：
touch .bash_profil 
open -e ~/.bash_profil

// 在.bash_profil文件配置
export https_proxy=http://127.0.0.1:7897（端口改为VPN上的端口设置）

// 终端输入：
source ~/.bash_profil
// 就可以开始在当前终端窗口install啦！网速嘎嘎快！

二、开始

前期准备都好了，那就开始搭建环境吧！🆙

  1. 环境搭建

  1. 安装Homebrew

Homebrew是一款Mac OS平台下的软件包管理工具,拥有安装、卸载、更新、查看、搜索等很多实用的功能

❗️如果没有代理，可能导致失败，可尝试Homebrew镜像安装

我的版本：Homebrew 4.2.17

如果有代理，网络情况较好，可执行如下官网安装命令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装过程中出现的问题及解决方案：

  1. 安装git

// 终端输入：
brew install git

  1. 安装Nvm

node.js版本管理工具，可以在同一台设备上安装和切换使用不同版本的Node.js

我的版本：Nvm 0.39.7

// 终端输入：
brew install nvm
mkdir ~/.nvm 
open -e ~/.bash_profil

// 在.bash_profil文件配置：
export NVM_DIR="$HOME/.nvm"
[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && . "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && . "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
 
// 终端输入：
source ~/.bash_profil
// 查看版本
nvm -v

  1. 安装node

node版本至少14以上

// 终端输入：
nvm install 18.20.2
nvm use 18.20.2

  1. 安装watchman

Watchman是用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。

我的版本：watchman 2024.04.08.00

// 终端输入：
brew install watchman
// 查看版本
watchman -v

  1. 安装Yarn

// 终端输入：
npm install -g yarn

  1. 安装Ruby

Ruby 是一种通用编程语言。React Native 在某些与 iOS 依赖管理相关的脚本中会使用到它

检查系统当前所使用的 Ruby 版本

// 终端输入：
ruby --version

我的系统Ruby版本：ruby 2.6.10p210

但是官网给出0.70版本的ruby应该为此版本 2.7.5，所以我们需要重新安装ruby，此过程可能🤔遇到问题，需要一步一步耐心安装

在这里我使用ruby版本管理器-rbenv安装ruby

  1. 安装rbenv
// 终端输入：
brew install rbenv ruby-build
// 查看版本
rbenv -v

我的版本：rbenv 1.2.0

  1. 安装ruby
// 终端输入：
rbenv install 2.7.5
  1. 设置全局ruby为指定版本
// 终端输入：
rbenv global 2.7.5
// 查看版本
ruby -v

查看ruby版本还是系统版本，global没有生效？如下配置 rbenv环境变量

// 终端输入：
touch .zshrc
open -e ~/.zshrc
// 在文件中添加
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
// 终端输入：
source ~/.zshrc 
rbenv global 2.7.5
// 查看版本
ruby -v

这样就成功啦🎉

我们也可以新开一个窗口查看ruby版本，如果仍然生效，说明已经全局作用🎉

  1. 安装CocoaPods

iOS 的 npm， 需要使用 CocoaPods 来管理依赖

我的版本：pod 1.15.2

// 终端输入：
brew install cocoapods
// 查看版本
pod --version

  1. 安装Xcode

在 App Store下载最新版xcode

ReactNative环境搭建及开发流程之IOS

以上环境就搭建好啦！

  1. 开发流程

  1. 克隆项目

注意：把项目目录放到用户目录下面跟Downloads（下载），Documents（文稿）这些目录平级，否则会导致一些权限问题

// 全局设置Git用户名、邮箱、密码
git config --global user.name "Your Name"
git config --global user.email "your_email@example.com"
git config --global credential.helper store

// 目录结构
|----rnProject
|-----ios (ios模块代码)
|-----Page
|-----index.js
|-----xxx

  1. 启动Xcode

  1. 安装ios依赖

终端打开/Users/admin/rnProject/ios

// 重启代理软件并在ios目录终端下输入：
source ~/.bash_profil
// 查看代理是否生效 https_proxy=http://127.0.0.1:7897
env
// 进行安装
pod install

pod install 失败遇到的问题

问题一： ios安装依赖不仅需要使用内部的一些插件，还有使用外网的一些插件。这将会导致下载中途失败！

当我们遇到Error installing xxxx的时候，如果是https://github下载失败，请新开终端打开代理继续执行`pod install，如果不是，则请新开终端关闭代理继续执行pod install`，这样反复关闭打开代理，可完成下载

问题二： xcrun: error: SDK “iphoneos“ cannot be located 的解决办法

ReactNative环境搭建及开发流程之IOS

  1. 打开/Users/admin/rnProject/ios.xcworkspace 文件
  1. 本地调试需在 ios项目 - Root 文件夹add files将 ip文件添加进来，如下：

ReactNative环境搭建及开发流程之IOS

添加ip.tx并将内容ip修改为自己的电脑ip地址 ReactNative环境搭建及开发流程之IOS

  1. 切换环境配置

配置过后就可以在手机应用➡️你的APP➡️环境配置➡️切换环境

ReactNative环境搭建及开发流程之IOS

  1. 使用 USB 闪电数据线连接 iOS 设备到 Mac设备

ReactNative环境搭建及开发流程之IOS

  1. 注册开发设备（首次运行需要注册）

ReactNative环境搭建及开发流程之IOS

注意数据线是否连接成功，没有成功将搜索不到手机 ReactNative环境搭建及开发流程之IOS

  1. 选中真机设备

ReactNative环境搭建及开发流程之IOS

  1. 登录appID账户

ReactNative环境搭建及开发流程之IOS

ReactNative环境搭建及开发流程之IOS

ReactNative环境搭建及开发流程之IOS

选中该Team ReactNative环境搭建及开发流程之IOS

  1. 启动

ReactNative环境搭建及开发流程之IOS

启动过程中如果出现如下弹窗，需输入电脑密码

ReactNative环境搭建及开发流程之IOS

如下图所示，如果没有出现❌，则原生部分启动成功啦！

ReactNative环境搭建及开发流程之IOS

  1. 启动RN模块

  1. 用vs code打开rnProject项目
  1. 项目根目录安装RN模块依赖
yarn
  1. 启动
yarn start

完成两个启动，就可以开始开发啦！

  1. 从设备上访问开发服务器

在启用开发服务器的情况下，你可以快速的迭代修改应用，然后在设备上立即查看结果。只需要在和电脑同样的 Wi-Fi 网络。摇晃设备打开Developer menu，然后 enable Live Reload。当 JavaScript 代码改变时 app 会重载

ReactNative环境搭建及开发流程之IOS

转载自:https://juejin.cn/post/7398050410793713674
评论
请登录