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

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 应用的开发菜单。

http://www.lryc.cn/news/2404171.html

相关文章:

  • scss(sass)中 的使用说明
  • 如何从浏览器中导出网站证书
  • 低功耗MQTT物联网架构Java实现揭秘
  • 总结HTML中的文本标签
  • python版若依框架开发:前端开发规范
  • AI推理服务的高可用架构设计
  • GPU集群故障分析:大型AI训练中的硬件问题与影响
  • ideal2022.3.1版本编译项目报java: OutOfMemoryError: insufficient memory
  • centos7编译安装LNMP架构
  • 接口限频算法:漏桶算法、令牌桶算法、滑动窗口算法
  • Spring Boot 3.3 + MyBatis 基础教程:从入门到实践
  • 征文投稿:如何写一份实用的技术文档?——以软件配置为例
  • 【后端】RPC
  • 详细讲解Flutter GetX的使用
  • ReLU 新生:从死亡困境到强势回归
  • tensorflow image_dataset_from_directory 训练数据集构建
  • QuickJS 如何发送一封邮件 ?
  • clickhouse 和 influxdb 选型
  • GOOUUU ESP32-S3-CAM 果云科技开发板开发指南(一)(超详细!)Vscode+espidf 通过摄像头拍摄照片并存取到SD卡中,文末附源码
  • C++学习思路
  • 全流程开源!高德3D贴图生成系统,白模一键生成真实感纹理贴图
  • 使用Conda管理服务器多版本Python环境的完整指南
  • html 滚动条滚动过快会留下边框线
  • 数据通信与计算机网络——数据与信号
  • 【LLM大模型技术专题】「入门到精通系列教程」LangChain4j与Spring Boot集成开发实战指南
  • Flask 基础与实战概述
  • 东芝Toshiba e-STUDIO2110AC打印机信息
  • Vue3 GSAP动画库绑定滚动条视差效果 绑定滚动条 滚动条动画 时间轴
  • grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!
  • git commit 执行报错 sh: -/: invalid option