React Navive初识

news2025/6/8 13:16:29

文章目录

    • 搭建开发环境
      • 安装 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.coloradmin.cn/o/2404171.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何从浏览器中导出网站证书

以导出 GitHub 证书为例,点击 小锁 点击 导出 注意:这里需要根据你想要证书格式手动加上后缀名,我的是加 .crt 双击文件打开

低功耗MQTT物联网架构Java实现揭秘

文章目录 一、引言二、相关技术概述2.1 物联网概述2.2 MQTT协议java三、基于MQTT的Iot物联网架构设计3.1 架构总体设计3.2 MQTT代理服务器选择3.3 物联网设备设计3.4 应用服务器设计四、基于MQTT的Iot物联网架构的Java实现4.1 开发环境搭建4.2 MQTT客户端实现4.3 应用服务器实现…

ideal2022.3.1版本编译项目报java: OutOfMemoryError: insufficient memory

最近换了新电脑,用新电脑拉项目配置后,启动时报错,错误描述 idea 启动Springboot项目在编译阶段报错:java: OutOfMemoryError: insufficient memory 2. 处理方案 修改VM参数,分配更多内存 ❌ 刚刚开始以为时JVM内存设置…

centos7编译安装LNMP架构

一、LNMP概念 LNMP架构是一种常见的网站服务器架构,由Linux操作系统、Nginx Web服务器、MySQL数据库和PHP后端脚本语言组成。 1 用户请求:用户通过浏览器输入网址,请求发送到Nginx Web服务器。 2 Nginx处理:Nginx接收请求后&…

Spring Boot 3.3 + MyBatis 基础教程:从入门到实践

Spring Boot 3.3 MyBatis 基础教程:从入门到实践 在当今的Java开发领域,Spring Boot和MyBatis是构建高效、可维护的后端应用的两个强大工具。Spring Boot简化了Spring应用的初始搭建和开发过程,而MyBatis则提供了一种灵活的ORM(…

征文投稿:如何写一份实用的技术文档?——以软件配置为例

📝 征文投稿:如何写一份实用的技术文档?——以软件配置为例 目录 [TOC](目录)🧭 技术文档是通往成功的“说明书”💡 一、明确目标读者:他们需要什么?📋 二、结构清晰:让读…

tensorflow image_dataset_from_directory 训练数据集构建

以数据集 https://www.kaggle.com/datasets/vipoooool/new-plant-diseases-dataset 为例 目录结构 训练图像数据集要求: 主目录下包含多个子目录,每个子目录代表一个类别。每个子目录中存储属于该类别的图像文件。 例如 main_directory/ ...cat/ ...…

GOOUUU ESP32-S3-CAM 果云科技开发板开发指南(一)(超详细!)Vscode+espidf 通过摄像头拍摄照片并存取到SD卡中,文末附源码

看到最近好玩的开源项目比较多,就想要学习一下esp32的开发,目前使用比较多的ide基本上是arduino、esp-idf和platformio,前者编译比较慢,后两者看到开源大佬的项目做的比较多,所以主要学习后两者。 本次使用的硬件是GO…

全流程开源!高德3D贴图生成系统,白模一键生成真实感纹理贴图

导读 MVPainter 随着3D生成从几何建模迈向真实感还原,贴图质量正逐渐成为决定3D资产视觉表现的核心因素。我们团队自研的MVPainter系统,作为业内首个全流程开源的3D贴图生成方案,仅需一张参考图与任意白模,即可自动生成对齐精确…

html 滚动条滚动过快会留下边框线

滚动条滚动过快时,会留下边框线 但其实大部分时候是这样的,没有多出边框线的 滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行为有关。这种问题可能出现在使用了自定义滚动条样式的情况下。 注意:使用方法 6 好使,其它…

数据通信与计算机网络——数据与信号

主要内容 模拟与数字 周期模拟信号 数字信号 传输减损 数据速率限制 性能 注:数据必须被转换成电磁信号才能进行传输。 一、模拟与数字 数据以及表示数据的信号可以使用模拟或者数字的形式。数据可以是模拟的也可以是数字的,模拟数据是连续的采用…

【LLM大模型技术专题】「入门到精通系列教程」LangChain4j与Spring Boot集成开发实战指南

LangChain4j和SpringBoot入门指南 LangChain4jLangchain4j API语言模型消息类型内存对象ChatMemory接口的主要实现设置 API 密钥SpringBoot Configuration配置ChatLanguageModelStreamingChatLanguageModel初始化ChatModel对象模型配置分析介绍说明通过JavaConfig创建ChatModel…

Vue3 GSAP动画库绑定滚动条视差效果 绑定滚动条 滚动条动画 时间轴

介绍 GSAP 用于创建高性能、可控制的动画效果。由 GreenSock 团队开发,旨在提供流畅、快速、稳定的动画效果,并且兼容各种浏览器。 提供了多个插件,扩展了动画的功能,如 ScrollTrigger(滚动触发动画)、Dra…

grafana-mcp-analyzer:基于 MCP 的轻量 AI 分析监控图表的运维神器!

还在深夜盯着 Grafana 图表手动排查问题?今天推荐一个让 AI 能“读图说话”的开源神器 —— grafana-mcp-analyzer。 想象一下这样的场景: 凌晨3点,服务器告警响起。。。你睁着惺忪的眼睛盯着复杂的监控图表 😵‍💫花…

【题解-洛谷】B3622 枚举子集(递归实现指数型枚举)

题目:B3622 枚举子集(递归实现指数型枚举) 题目描述 今有 n n n 位同学,可以从中选出任意名同学参加合唱。 请输出所有可能的选择方案。 输入格式 仅一行,一个正整数 n n n。 输出格式 若干行,每行…

(LeetCode 每日一题)3170. 删除星号以后字典序最小的字符串(贪心+栈)

题目:3170. 删除星号以后字典序最小的字符串 思路:贪心栈,时间复杂度0(n)。 对于每一个‘ * ’,优先选最右边的最小字符,才会使最终得到的字符串最小。 用栈,来记录每个字符的位置下标。细节看注释。 C版本…

使用 HTML + JavaScript 实现文章逐句高亮朗读功能

在这个信息爆炸的时代,我们每天都要面对大量的文字阅读。无论是学习、工作还是个人成长,阅读都扮演着至关重要的角色。然而,在快节奏的生活中,我们往往难以找到足够的安静时间专注于阅读。本文用 HTML JavaScript 实现了一个基于…

双碳时代,能源调度的难题正从“发电侧”转向“企业侧”

安科瑞刘鸿鹏 摘要 在“双碳”战略和能源结构转型的大背景下,企业储能电站逐步成为提升能源利用效率、增强用能韧性的重要手段。随着系统规模扩大与运行复杂度提升,如何对光伏、储能、负荷等流进行实时调控,成为智慧用能的关键。ACCU100微…

3. 简述node.js特性与底层原理

😺😺😺 一、Node.js 底层原理(简化版) Node.js 是一个 基于 Chrome V8 引擎构建的 JavaScript 运行时,底层核心由几部分组成: 组成部分简要说明 1.V8 引擎 将 JS 编译成机器码执行&#xff0…

OpenCV CUDA模块图像处理------创建一个模板匹配(Template Matching)对象函数createTemplateMatching()

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 创建一个用于在 GPU 上执行模板匹配的 TemplateMatching 对象。 该函数返回一个指向 TemplateMatching 的智能指针(Ptr)…