React Native 环境搭建——IOS环境

这篇具有很好参考价值的文章主要介绍了React Native 环境搭建——IOS环境。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

React Native 环境搭建,参考:加餐|集中答疑:详解iOS环境搭建-极客时间

已有npm、node、Homebrew

一、iOS环境搭建

1、安装Homebrew

Homebrew国内如何自动安装(国内地址)(Mac & Linux) - 知乎

2、安装node、npm

3、安装 Watchman 的工具

它是由 Facebook 开发的一个工具,只要你的文件有一些变化,它就会自动重新运行你的项目。

使用 Homebrew 来安装:

watchman brew install watchman

4、安装 Ruby

Ruby 是一种常用编程语言。在 React Native iOS 应用的依赖管理中会使用到它。Mac 电脑上默认集成了 Ruby,但却和 React Native 所依赖的 Ruby 版本有些不一致。

因此,你需要通过 rbenv 对 Ruby 进行版本管理,就像使用 NVM 工具用于管理 Node 的版本一样。

系统自带的 Ruby 是 2.6.10 版本,而 React Native 0.71 所依赖的 Ruby 版本是 2.7.6。因此,我们需要使用 rbenv 将 Ruby 版本切换到 2.7.6。

使用 Homebrew 安装 rbenv:

brew install rbenv ruby-build

安装完成后,运行 init 命令。运行完成后,它会提示你需要在 .zshrc 文件中执行 rbenv init 命令,因此你需要根据提示,使用 echo 将 init 命令添加到 Terminal 启动前。以保障 Terminal 启动时,rbenv 会生效。相关命令如下:

rbenv init

# 每人的提示信息不一定相同,根据提示信息进行相关操作

echo 'eval "$(rbenv init - zsh)"' >> ~/.zshr

命令执行完成后,重启 Terminal,安装并切换到 React Native 所依赖的 Ruby 版本。

rbenv init

rbenv global 2.7.6

切换完成 Ruby 版本后,再次重启 Terminal,再次运行 ruby --version 命令,确定 Ruby 版本是否切换成功。

5、切换 Ruby 包管理工具的镜像源,Gem 和 Bundler

Ruby 有两种常用包管理工具,Gem 和 Bundler。这两种包管理工具都会用到,因此需要将这两种包管理工具的镜像源都切换到国内。

切换 Gem 镜像源的方法是通过 gem sources 命令进行切换,命令如下:

gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/

校验:

gem sources -l

出现 https://gems.ruby-china.com 即为成功

切换 Bundler 镜像源的方法是通过设置 config 进行切换,命令如下:

sudo bundle config mirror.RubyGems.org | your community gem host RubyGems.org | Ruby 社区 Gem 托管

它会在 Bundler 的全局配置中添加一个 mirror.https://rubygems.org 的参数,将其值设置为 https://gems.ruby-china.com,表示在下载和安装包时使用 Ruby China 的镜像源地址

6、安装和配置 Xcode

打开 App Store,搜索 Xcode 进行下载。

运行Xcode后,点击左上角 Xcode 标识,点击Settings( Preferences)

找到 Locations 标签中的 Command Line Tools 一栏,选择对应的 Xcode。选择完成后,点击选择框下灰色字体,确定 Xcode 的目录地址是否正确。

确定完成后,就完成了 Xcode 的安装和配置。

7、安装 CocoaPods

在前面我们提到过,Ruby 有两种常用包管理工具,Gem 和 Bundler。CocoaPods 是另一种包管理工具,它虽然是用 Ruby 编写的,但不是 Ruby 的包管理工具,而是 iOS 的包管理工具。

这里我们借助 Gem 来安装 CocoaPods:

sudo gem install cocoapods

安装完成后,运行如下命令确定 CocoaPods 是否已经安装成功:

pod --version1.11.3

8、新建一个 React Native 项目

我们借助 React Native 内置的命令行工具,来创建一个名为 “AwesomeProject” 的新项目:

npx react-native init AwesomeProject

会出现错误,需要切换 CocoaPods 的镜像,切换到清华大学开源软件镜像站的镜像,切换方式如下:

cd ~/.cocoapods/repos

pod repo remove master

git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master

执行完上述命令后,进入 AwesomeProject/ios 目录,找到 Podfile 文件,在文件第一行添加:

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

我遇到了无法编辑的权限问题,查看权限:

ls -l 显示 -rw-r--r-- 1 root staff 2173 7 4 15:27 Podfile

文件所有者为root,而不是我,修改所有者为当前用户:

sudo chown -R songcy AwesomeProject

再在 AwesomeProject/ios 目录下,运行 CocoaPods 安装命令即可:

sudo bundle exec pod install --allow-root

Ps:CocoaPods 不建议以 root 用户身份运行,可以尝试使用普通用户身份执行 bundle exec pod install 命令,或者使用 --allow-root 参数允许以 root 用户身份运行 CocoaPods,即 sudo bundle exec pod install --allow-root

9、启动项目

npx react-native run-ios

命令运行后,会自动启动模拟器并加载项目,等待build后就能看到页面了。文章来源地址https://www.toymoban.com/news/detail-743582.html

到了这里,关于React Native 环境搭建——IOS环境的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 搭建React Native开发环境

    node.js官网 需要确定自己安装的版本是否是12版本以上 node -v npm install -g yarn 这是官网推荐的安装地址: android studio 国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择\\\"Custom\\\"选项,确保选中了以下几项: 所以需要我们自己想办法来安装

    2024年02月04日
    浏览(43)
  • React Native环境配置搭建

    React Native官网环境搭建教程写的不够详细,并且有些坑,使得搭建环境很慢,本文章就是为了解决这些问题,以新手为标准的文档。 首先看下官网的说明: 重点: 必须安装的依赖有:Node、JDK 和 Android Studio 。 安装完这三个基本就可以了,接下来就详细讲讲这三个的安装。

    2024年02月13日
    浏览(27)
  • 【React Native】学习记录(一)——环境搭建

    Expo是一套工具,库和服务,可让您通过编写JavaScript来构建原生iOS和Android应用程序。 一开始学习的时候直接使用的是expo。 接下来需要搭建安卓和IOS端(为此特意换成了苹果电脑),主要参考的是 这里。 先说说比较容易大家的苹果系统:(在此之前记得先安装node) 可以通过

    2024年02月15日
    浏览(33)
  • React Native环境配置搭建(全网最全 没有之一)

    小编在配置RN环境的时候,遇到了各种 坎儿,在发布这篇之前终于是搞好了,特此在这把详细过程记录下,以便造福各位。(一键三连点关注,关注小夏不迷路) 准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。 1)node必须在14以上,可以去 node官网下载。 2)个人我推

    2024年02月02日
    浏览(45)
  • React Native环境配置搭建(看这一篇就够了!)

    搭建开发环境 · React Native 中文网 https://reactnative.cn/docs/environment-setup 开发平台选择 windows  目标平台选择 Android 准备工作:必须安装的依赖有:Node、JDK 和 Android Studio。 1、安装node  node必须在14以上,可以去 node官网下载,我这里用的是NVM。NVM教程  可以打开cmd,查看当前n

    2024年02月01日
    浏览(54)
  • React-Native: Android 编译过程中 gradle 依赖包下载各种下载不下来、下载超时、极慢下载的处理方案。

     报错提示如下 1、下载不下来、下载超时。   2、下载极慢,基本就是几KB的在慢慢下载。  解决方案 就以报错提示来看,提供的下载jar压缩包的链接,丢到浏览器也是很难下载的。 但是,我们可以换个仓库去下载 https://mvnrepository.com/ 1、浏览器打开上面的链接 2、输入框搜

    2024年02月02日
    浏览(62)
  • react-Native init初始化项目报错”TypeError: cli.init is not a function“

    在react-native init appDemo 创建项目时,报错TypeError: cli.init is not a function。 产生这个问题的原因是:使用这种方式创建工程,react-native版本是0.69 版本上不适用。可以检查下自己安装的React-native的版本。 使用: npx react-native init Demo --version 0.68.2 即可。 解决方法不好用的话,那就

    2024年02月15日
    浏览(44)
  • react native在windows环境搭建并使用脚手架新建工程

    截止到2024-1-11,使用的主要 软件的版本 如下: 软件实体 版本 react-native 0.73.1 react 18.2.0 react-native-cli 2.0.1 Android Studio 2022.3.1 Patch3 Android SDK Android SDK Platform 33 34 Android SDK Android SDK Tools 33 34 Android SDK Intel x86 Atom_64 System Image Android SDK Google APIs Intel x86 Atom System Image node 20.10.0 yarn 1.

    2024年02月02日
    浏览(47)
  • react native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

    前言 本文基于:“react-native” : “^0.73.0” 1.安装 Node Node.js,下载时选择 = 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK),下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.安装 Android Studio 下载并安装 Android Studio ,获取编译 Android 应用所需

    2024年01月23日
    浏览(66)
  • React Native 集成到iOS原有的项目上

    集成到现有原生应用 把 React Native 组件集成到 iOS 应用中有如下几个主要步骤: 配置好 React Native 依赖和项目结构。 了解你要集成的 React Native 组件。 使用 CocoaPods,把这些组件以依赖的形式加入到项目中。 创建 js 文件,编写 React Native 组件的 js 代码。 在应用中添加一个RC

    2024年02月12日
    浏览(74)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包