【iOS开发】(一)2024 从一无所有开始,到ios开发(react Native)

本文详细介绍了如何在Mac上安装和配置开发工具,包括使用Homebrew管理软件包、安装Node.js和Yarn包管理器,以及ReactNative的脚手架设置。重点讲解了iOS环境的搭建过程,如CocoaPods依赖管理和Xcode配置,以及如何创建并启动一个ReactNative应用。
摘要由CSDN通过智能技术生成


2024 从一无所有开始,到ios开发(react Native)


在这里插入图片描述

在这里插入图片描述

1 工具简介

  • Homebrew (brew):macOS 和 Linux 上的软件包管理器,用于安装和管理各种软件包。
  • Node.js:基于 Chrome V8 引擎的 JavaScript 运行环境,用于在服务器端运行 JavaScript 代码。
  • npm:Node.js 的官方包管理器,用于安装、升级、删除和管理 JavaScript 包。
  • Yarn:Facebook、Google 和 Exponent 联合开发的 JavaScript 包管理器,旨在提供更快的安装速度和更可靠的安装结果。
  • React Native:由 Facebook 推出的基于 React 的框架,用于构建原生移动应用程序。
  • ** Watchman**:Watchman 是由 Facebook 开发的一个文件监视器。它可以监听文件系统的变化,并在文件发生变化时执行相应的操作。在开发中,特别是在前端开发中,Watchman 可以用来监视项目文件的变化,并触发自动构建、刷新浏览器等操作,提高开发效率。
  • Pop(React Native Pop):Pop 是 Facebook 推出的一个用于在 React Native 应用中实现高性能动画的库。它建立在原生平台的动画 API 之上,并提供了更高级别的抽象,使得在 React Native 应用中实现流畅的动画变得更加容易。

2 基础环境搭建

在这里插入图片描述

1 安装 brew

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

(2024年4月)

2 安装 Node.js

brew install node
验证:
node -v
npm -v

3 安装 Yarn

npm install -g yarn

4 安装 React Native 脚手架

npm install -g react-native-cli

ios实操示例:

在这里插入图片描述

** cd ios && pod install && cd …/ **
这个命令的作用是:

首先,进入项目 到名为 “ios” 的目录中。通常,React Native 项目的 iOS 部分代码都存放在一个名为 “ios” 的目录中。
然后,运行 pod install 命令。这个命令用于使用 CocoaPods 安装 iOS 项目的依赖项。CocoaPods 是一个用于管理 iOS 项目中依赖库的工具,类似于 npm 或 Yarn。
运行 pod install 会根据项目中的 Podfile 文件安装所需的依赖库。
最后,返回到项目的根目录。这个命令中使用了 cd …/ 来返回到上一级目录,也就是项目的根目录。

3 ios环境搭建

在这里插入图片描述

过程中,若yarn ios 命令,若遇到了一个关于 Xcode 的错误,提示你需要安装 Xcode 或者配置 Xcode 的路径。 命令: sudo xcode-select --reset

输入开机密码后,会自动重新运行 pod install, install 后,Xcode 项目的配置可能会发生变化,可能会触发 React Native 项目的重新构建或刷新。

4创建并启动一个app

在这里插入图片描述

react-native init mywdm (MyProject)
初始化


wangqian@wangqians-MacBook-Air %react-native init mywdm(MyProject)

wangqian@wangqians-MacBook-Air mywdm %cd mywdm
wangqian@wangqians-MacBook-Air mywdm % ls
App.tsx        __tests__    index.js    node_modules    yarn.lock
Gemfile        android        ios        package.json
Gemfile.lock    app.json    jest.config.js    tsconfig.json
README.md    babel.config.js    metro.config.js    vendor

yarn ios 操作是用于在 React Native 项目中启动 iOS 应用程序的命令。当你运行 yarn ios 命令时,它会执行以下操作:

启动开发服务器(Metro Bundler):首先,yarn ios 命令会启动开发服务器,也称为 Metro Bundler。开发服务器负责打包 JavaScript 代码并提供给 iOS 应用程序。
启动 iOS 模拟器:接下来,命令会尝试启动 iOS 模拟器,以在模拟器中运行你的应用程序。
构建和运行应用程序:一旦模拟器启动,React Native 会将 JavaScript 代码打包,并通过开发服务器加载到模拟器中。然后,应用程序会在模拟器中运行,并通过开发服务器获取更新的 JavaScript 代码。


在这里插入图片描述
项目在模拟器上运行的画面

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值