当前位置: 首页 > 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 应用的开发菜单。

相关文章:

React Navive初识

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

scss(sass)中 的使用说明

在 SCSS(Sass)中,& 符号是一个父选择器引用,它代表当前嵌套规则的外层选择器。主要用途如下: 1. 连接伪类/伪元素 scss 复制 下载 .button {background: blue;&:hover { // 相当于 .button:hoverbackgrou…...

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

以导出 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 应用服务器实现…...

总结HTML中的文本标签

总结HTML中的文本标签 文章目录 总结HTML中的文本标签引言一、标题标签(h1 - h6)语法示例使用建议 二、段落标签(p)语法示例使用建议 三、文本节点标签(span)语法示例使用建议 四、粗体标签(b&a…...

python版若依框架开发:前端开发规范

python版若依框架开发 从0起步,扬帆起航。 python版若依部署代码生成指南,迅速落地CURD!项目结构解析前端开发规范文章目录 python版若依框架开发新增 view新增 api新增组件新增样式引⼊依赖新增 view 在 @/views文件下 创建对应的文件夹,一般性一个路由对应⼀个文件, 该…...

AI推理服务的高可用架构设计

AI推理服务的高可用架构设计 在传统业务系统中,高可用架构主要关注服务冗余、数据库容灾、限流熔断等通用能力。而在AI系统中,尤其是大模型推理服务场景下,高可用架构面临更加复杂的挑战,如推理延迟敏感性、GPU资源稀缺性、模型版本切换频繁等问题。本节将专门探讨如何构建…...

GPU集群故障分析:大型AI训练中的硬件问题与影响

GPU集群故障分析:大型AI训练中的硬件问题与影响 核心问题 在大型AI计算集群(如使用上千块GPU卡训练大模型)中: GPU硬件会出哪些毛病?这些问题发生的频率、严重程度如何?最终对AI训练任务有什么影响&#…...

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接收请求后&…...

接口限频算法:漏桶算法、令牌桶算法、滑动窗口算法

文章目录 限频三大算法对比与选型建议一、漏桶算法(Leaky Bucket Algorithm)1.核心原理2.实现3.为什么要限制漏桶容量4.优缺点分析 二、令牌桶算法(Token Bucket Algorithm)1.核心原理2.实现(1)单机实现&am…...

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

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

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

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

【后端】RPC

不定期更新。 定义 RPC 是 Remote Procedure Call 的缩写,中文通常翻译为远程过程调用。作用 简化分布式系统开发。实现微服务架构,便于模块化、复用。提高系统性能和可伸缩性。提供高性能通信、负载均衡、容错重试机制。 在现代分布式系统、微服务架构…...

详细讲解Flutter GetX的使用

Flutter GetX 框架详解:状态管理、路由与依赖注入 GetX 是 Flutter 生态中一款强大且轻量级的全功能框架,集成了状态管理、路由管理和依赖注入三大核心功能。其设计理念是简洁高效,通过最小的代码实现最大的功能,特别适合快速开发…...

ReLU 新生:从死亡困境到强势回归

背景 在深度学习领域,激活函数的探索已成为独立研究课题。诸如 GELU、SELU 和 SiLU 等新型激活函数,因具备平滑梯度与出色的收敛特性,正备受关注。经典 ReLU 凭借简洁性、固有稀疏性及其独特优势拓扑特性,依旧受青睐。然而&#…...

tensorflow image_dataset_from_directory 训练数据集构建

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

QuickJS 如何发送一封邮件 ?

参阅:bellard.org‌ : QuickJS 如何使用 qjs 执行 js 脚本 在 QuickJS 中发送邮件需要依赖外部库或调用系统命令,因为 QuickJS 本身不包含 SMTP 功能。以下是两种实现方法: 方法 1:调用系统命令(推荐) 使…...

clickhouse 和 influxdb 选型

以下是 ClickHouse、InfluxDB 和 HBase 在体系架构、存储引擎、数据类型、性能及场景的详细对比分析: 🏗️ ‌一、体系架构对比‌ ‌维度‌‌ClickHouse‌‌InfluxDB‌‌HBase‌‌设计目标‌大规模OLAP分析,高吞吐复杂查询 时序数据采集与监控,优化时间线管理高吞吐随机…...

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

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

C++学习思路

C++知识体系详细大纲 一、基础语法 (一)数据类型 基本数据类型 整数类型(int, short, long, long long)浮点类型(float, double, long double)字符类型(char, wchar_t, char16_t, char32_t)布尔类型(bool)复合数据类型 数组结构体(struct)联合体(union)枚举类型…...

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

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

使用Conda管理服务器多版本Python环境的完整指南

在服务器环境中管理多个Python版本是开发者和系统管理员常见的需求,尤其是当不同项目依赖特定版本的Python时。本文将重点介绍如何通过Conda实现多版本Python的隔离与管理,确保服务器环境的稳定性和灵活性。 为什么需要多版本Python管理? 服…...

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

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

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

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

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

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

Flask 基础与实战概述

一、Flask 基础知识 什么是 Flask? Flask 是一个基于 Python 的轻量级 Web 框架(微框架)。 特点:核心代码简洁,给予开发者更多选择空间。 与 Django 对比: Django 创建空项目生成多个文件,Flask 仅需一个文件即可实现简单应用(如 "Hello, World!")。 Flask …...

东芝Toshiba e-STUDIO2110AC打印机信息

基本信息 产品类型:数码复合机颜色类型:彩色涵盖功能:复印、打印、扫描接口类型:标配为 Ethernet(RJ45)10/100/1000BASE - T、USB2.0 高速;选配为 Wireless Lan、IEEE802.11b/g/n、blueteeth。中…...

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

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

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

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