当前位置: 首页 > news >正文

React Navive初识

文章目录

    • 搭建开发环境
      • 安装 Node、homebrew、Watchman
        • 安装 Node
        • 安装 homebrew
        • 安装 watchman
      • 安装 React Native 的命令行工具(react-native-cli)
      • 创建新项目
      • 编译并运行 React Native 应用
        • 在 ios 模拟器上运行
    • 调试
      • 访问 App 内的开发菜单

搭建开发环境

在开始使用 React Native 进行开发之前,我们需要搭建好相应的开发环境。以下是详细的搭建步骤,官方文档可参考:参考网址

安装 Node、homebrew、Watchman

安装 Node

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,React Native 开发依赖 Node 来运行 JavaScript 代码。你可以从 Node.js 官方网站(官方网站)下载适合你操作系统的安装包进行安装。安装完成后,在终端中输入以下命令来验证 Node 和 npm(Node 包管理器)是否安装成功:

node -v
npm -v

如果成功输出版本号,则说明安装成功。

安装 homebrew

Homebrew 是 macOS 上的一个包管理工具,它可以帮助我们方便地安装各种软件包。在终端中执行以下命令来安装 Homebrew:

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

上述命令会从 Homebrew 的官方仓库下载安装脚本并执行。安装过程中可能需要你输入管理员密码进行授权。安装完成后,你可以使用以下命令来验证 Homebrew 是否安装成功:

brew --version
安装 watchman
brew install watchman

Watchman 是由 Facebook 提供的监视文件系统变更的工具。在 React Native 开发中,它起着重要的作用。当我们对项目中的文件进行修改时,Watchman 可以快速捕捉到这些变化,并通知 packager(打包服务)。这样,packager 就能及时重新打包并刷新应用,从而提高开发时的性能,实现实时刷新的效果。

安装 React Native 的命令行工具(react-native-cli)

安装 react-native-cli:

npm install -g react-native-cli

npm 是 Node.js 的包管理工具,install -g 表示全局安装。React Native 的命令行工具 react-native-cli 为我们提供了一系列方便的命令,用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。例如,我们可以使用它来快速创建一个新的 React Native 项目,或者启动项目的开发服务器。

创建新项目

react-native init MyApp --version 0.44.3

react-native initreact-native-cli 提供的一个命令,用于初始化一个新的 React Native 项目。MyApp 是项目的名称,你可以根据自己的需求进行修改。--version 0.44.3 表示指定项目使用的 React Native 版本为 0.44.3。如果你不指定版本,默认会使用最新版本。执行该命令后,react-native-cli 会自动下载并配置项目所需的依赖,创建项目的基本结构。

编译并运行 React Native 应用

在 ios 模拟器上运行
react-native run-ios

react-native run-ios 命令用于在 iOS 模拟器上编译并运行 React Native 应用。在执行该命令之前,请确保你已经安装了 Xcode 开发环境,因为 iOS 开发依赖于 Xcode。执行该命令后,React Native 会自动编译项目代码,并在 iOS 模拟器中启动应用。

调试

在开发过程中,调试是一个非常重要的环节。官网文档提供了详细的调试指南:调试指南

访问 App 内的开发菜单

在开发过程中,我们可以通过访问 App 内的开发菜单来进行一些调试操作,如开启调试模式、查看日志等。

如果是在 iOS 模拟器中运行,还可以按下 Command + D 快捷键来打开开发菜单。对于 Android 模拟器,对应的快捷键是 Command⌘ + M(在 Windows 系统上可能是 F1 或者 F2)。另外,我们也可以直接在命令行中运行以下命令来发送菜单键命令:

adb shell input keyevent 82

adb 是 Android Debug Bridge 的缩写,它是一个通用的命令行工具,用于与连接的 Android 设备或模拟器进行通信。adb shell input keyevent 82 命令会模拟按下菜单键的操作,从而打开 Android 应用的开发菜单。

相关文章:

  • 优化Docker容器化安装与配置的最佳实践
  • Golang面试精解:实现并发安全带过期清理的缓存结构
  • 极限复习c++
  • Spring Plugin框架应用实践:医院多租户客户端动态路由方案解析
  • 【地址区间划分】
  • 【科研绘图系列】R语言绘制和弦图(Chord diagram plot)
  • 如何通过requests和time模块限制爬虫请求速率?
  • MATLAB读取文件内容:Excel、CSV和TXT文件解析
  • 极昆仑HybridRAG方案:突破原生 RAG 瓶颈,开启大模型应用新境界
  • Linux磁盘管理与文件系统
  • 七彩喜智慧养老平台:科技赋能下的市场蓝海,满足多样化养老服务需求
  • 利率的计量
  • ml307 二次开发
  • SpringBoot项目移动之后无法运行
  • 电路设计基础-3
  • 新建网站部署流程
  • 2025年阿里最新软件测试面试题:Web 测试+接口测试+App 测试
  • GitHub 开源 AI 图像超分辨率工具 upscayl 介绍
  • 为什么使用beego框架接收不到前端的请求体
  • 前端开发面试题总结-CSS篇
  • 互联网公司网站建设/长沙seo霜天博客
  • wordpress 心理/影视站seo教程
  • 做网站首选智投未来1/网站优化培训学校
  • 保定行业网站/建立网站用什么软件
  • 网站怎样优化文章关键词/青岛疫情最新情况
  • 建设英文网站/西地那非片吃了能延时多久