【React Native】学习记录(一)——环境搭建

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

Expo是一套工具,库和服务,可让您通过编写JavaScript来构建原生iOS和Android应用程序。

一开始学习的时候直接使用的是expo。

  npx create-expo-app my-app
  cd my-app
  npm run start

接下来需要搭建安卓和IOS端(为此特意换成了苹果电脑),主要参考的是 这里。

先说说比较容易大家的苹果系统:(在此之前记得先安装node)

# 先安装brew,使用国内的地址
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

# 安装watchman(mac可以安装)
brew install watchman

# 在开发过程中会用到npm, 建议切换源
npx nrm use taobao

可以通过 App Store 或是到Apple 开发者官网上下载Xcode,下载完成之后启动 Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools

【React Native】学习记录(一)——环境搭建,学习记录,react native

接下来你可以在Xcode中新建一个IOS项目:

【React Native】学习记录(一)——环境搭建,学习记录,react native

CocoaPods是官方推荐安装的,可以理解为针对 iOS 的 npm

brew install cocoapods

到这里IOS安装完成,可以在项目中执行npm run ios

接下来是安卓的安装,这里强调需要确保上网自由!!!

# 名为 Zulu 的 OpenJDK 发行版。此发行版同时为 Intel 和 M1 芯片提供支持
brew tap homebrew/cask-versions
brew install --cask zulu11

# 查看jdk是否安装成功
javac -version

首先下载和安装 Android Studio,这里我直接采用了标准的安装模式。需要等很久~

安装成功之后,打开软件,在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。

【React Native】学习记录(一)——环境搭建,学习记录,react native

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 13 (Tiramisu)选项,确保勾选了下面这些组件:

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)或是Google APIs ARM 64 v8a System Image(针对 Apple Silicon 系列机型)

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的33.0.0版本。你可以同时安装多个其他版本。

之后配置环境变量:

# 在终端中执行
vim ~/.zshrc

# 输入单字母i,表示进入输入模式insert
# 将下列内容进行粘贴:
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# 按esc
# 输入 :wq 注意是三个字符而不是两个

# 使环境变量设置立即生效
source ~/.zshrc

#检查此变量是否已正确设置
echo $ANDROID_HOME

新建安卓项目,点击运行,那么此时就会弹出一个模拟器了,确保了安卓项目是可以打开模拟器的。

建议到这一步,还是重启一下电脑,然后回到我们的react native项目中,测试一波:

npm run start
# 然后按下a打开安卓模拟器
# 打开之后再按下i,打开ios模拟器

【React Native】学习记录(一)——环境搭建,学习记录,react native

到这里就安装完成了~文章来源地址https://www.toymoban.com/news/detail-611540.html

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

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

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

相关文章

  • React Native 环境搭建——IOS环境

    React Native 环境搭建,参考:加餐|集中答疑:详解iOS环境搭建-极客时间 已有npm、node、Homebrew 1、安装 Homebrew Homebrew国内如何自动安装(国内地址)(Mac Linux) - 知乎 2、安装 node、npm 3、安装 Watchman 的工具 它是由 Facebook 开发的一个工具,只要你的文件有一些变化,它就会自

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

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

    2024年02月02日
    浏览(48)
  • 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日
    浏览(56)
  • 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日
    浏览(48)
  • 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日
    浏览(68)
  • React Native 环境安装

    Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.   搭建开发环境 · React Native 中文网 Homebrew(包管理器) → rvm(ruby版本管理) → ruby → cocoapods 安装 Homebrew Homebrew 安装RVM 使用RVM 安装Ruby RVM 查看版本,并设置默认Ruby版本 安装cocoapods pod 生成项目 进入指定目录下

    2024年01月22日
    浏览(50)
  • React Native 环境配置(mac)

    安装工具的工具brew ,如果是中国大陆, 请参考Homebrew国内源 , 如果网络足够好,可以尝试官网直接安装brew 官网。 官方推荐使用Homebrew来安装 Node 和 Watchman。在命令行中执行下列命令安装(如安装较慢可以尝试阿里云的镜像源): 安装完 Node 后建议设置 npm 镜像(淘宝源)以

    2024年02月08日
    浏览(43)
  • React-Native学习,RN的容器Flex-Box布局

    justify-content(在RN中属性名称为:justifyContent)在主轴上对齐方式 align-items(在RN中属性名称为:alignItems)在交叉轴上的对齐方式 在React Native中,当没有设置容器的主轴方向时,默认容器主轴方向为:flexDrection: \\\'column\\\',也就是说,当我们的容器的主轴的排布方向为竖直方向时

    2024年02月16日
    浏览(54)
  • react native 0.73 配置 react-native-fs

    npm yarn android/settings.gradle android/app/build.gradle androidappsrcmainjavacomreactnative_demoMainApplication.kt 把原代码 改为

    2024年04月08日
    浏览(45)
  • 探索React Native的世界:gorhom/react-native-animated-tabbar

    项目地址:https://gitcode.com/gorhom/react-native-animated-tabbar 在移动应用开发领域,React Native以其高效、跨平台的能力受到了广泛的欢迎。今天,我们要向您推荐一个极具创意且实用的React Native组件库——gorhom/react-native-animated-tabbar。它是一个精美设计的动画TabBar,为您的应用提供生

    2024年04月17日
    浏览(85)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包