使用 React Native 针对 Android 进行开发

news2024/10/5 21:16:48

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

概述

通过安装所需工具开始使用 React Native

创建新的 React Native 项目


本指南将有助于开始使用 Windows 上的 React Native 创建在 Android 设备上工作的跨平台应用。

概述

React Native 是由 Facebook 创建的开源移动应用程序框架。 它用于开发适用于 Android、iOS、Web 和 UWP (Windows) 的应用程序,提供本机 UI 控制和对本机平台的完全访问权限。 使用 React Native 的前提是需要了解 JavaScript 基础知识。

通过安装所需工具开始使用 React Native

  1. 安装 Visual Studio Code(或选择的代码编辑器)。

  2. 安装适用于 Windows 的 Android Studio。 Android Studio 默认安装最新的 Android SDK。 React Native 需要 Android 6.0 (Marshmallow) SDK 或更高版本。 建议使用最新的 SDK。

  3. 创建 Java SDK 和 Android SDK 的环境变量路径:

    • 在 Windows 搜索菜单中输入“编辑系统环境变量”,这将打开“系统属性”窗口。
    • 选择“环境变量…”,然后选择“用户变量”下的“新建…” 。
    • 输入变量名称和值(路径)。 Java SDK 和 Android SDK 的默认路径如下所示。 如果已选择安装 Java SDK 和 Android SDK 的特定位置,请确保相应地更新变量路径。
      • JAVA_HOME:C:\Program Files\Android\Android Studio\jre\bin
      • ANDROID_HOME:C:\Users\username\AppData\Local\Android\Sdk

    Screenshot of adding environmental variable path

  4. 安装适用于 Windows 的 NodeJS。如果要处理多个 NodeJS 项目和版本,则可能需要考虑使用适用于 Windows 的 Node 版本管理器 (nvm)。 建议为新项目安装最新版本的 LTS。

 备注

可能还需考虑安装并使用 Windows 终端以使用首选命令行接口 (CLI),以及用于版本控制的 Git。 Java JDK 随 Android Studio v2.2+ 一起打包,但如果需要从 Android Studio 中单独更新 JDK,请使用 Windows x64 安装程序。

创建新的 React Native 项目

  1. 使用与 npm 一起安装的包运行程序 npx 创建新的 React Native 项目。 在 Windows 命令提示符、PowerShell、Windows 终端或 VS Code 中的集成终端(“视图”>“集成终端”)中实现该操作。

    PowerShell复制

    npx react-native init MyReactNativeApp
    

    如果要使用特定 React Native 版本启动新项目,可以使用 --version 参数。 有关 React Native 版本的信息,请参阅版本 - React Native。

    PowerShell复制

    npx react-native@X.XX.X init  <projectName> --version X.XX.X
    
  2. 打开新目录“MyReactNativeApp”:

    PowerShell复制

    cd MyReactNativeApp
    
  3. 如果要在硬件 Android 设备上运行项目,请通过 USB 电缆将设备连接到计算机。

  4. 如果要在 Android 模拟器上运行项目,则无需执行任何操作,因为 Android Studio 安装时就已装有一个默认模拟器。 如果要在特定设备的模拟器上运行应用, 请单击工具栏中的“AVD 管理器”按钮。

    Screenshot of the AVD Manager button

  5. 要运行项目,请输入以下命令。 这将打开显示 Node Metro Bundler 的新控制台窗口。

    PowerShell复制

    npx react-native run-android
    

    Screenshot of Metro Bundler in a console window

    Screenshot of the default React Native app running in an Android emulator

     备注

    如果要使用新安装的 Android Studio,且还未进行任何其他 Android 开发,则可能在运行有关接受 Android SDK 的许可证的应用时,在命令行收到错误。 例如“警告: 包 Android SDK 平台 29 的许可证不被接受。”要解决此问题,可以单击 Android Studio 中的“SDK 管理器”按钮

    Screenshot of the SDK Manager button

    。 或者通过以下命令列出并接受许可证,确保使用计算机上的 SDK 的位置路径。

    PowerShell复制

    C:\Users\[User Name]\AppData\Local\Android\Sdk\tools\bin\sdkmanager --licenses
    
  6. 要修改应用,请打开所选择的 IDE 中的项目目录 MyReactNativeApp。 建议使用 VS Code 或 Android Studio。

  7. react-native init 创建的项目模板使用名为 App.js 的主页。 此页面预填充了许多有用的链接,这些链接指向有关 React Native 开发的信息。 向第一个 Text 元素添加一些文本,如下面所示的“HELLO WORLD!”字符串。

    JavaScript复制

    <Text style={styles.sectionDescription}>
      Edit <Text style={styles.highlight}>App.js</Text> to change this
      screen and then come back to see your edits. HELLO WORLD!
    </Text>
    
  8. 重载应用以显示所作的更改。 有多种方法可实现此目的。

    • 在 Metro Bundler 控制台窗口中,键入“r”。
    • 在 Android 设备模拟器中,双击键盘上的“r”。
    • 在硬件 Android 设备上,晃动设备以打开 React Native 调试菜单,然后选择“重载”。 

      Screenshot of the React Native debug menu

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1015713.html

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

相关文章

【操作系统】聊聊进程间通信方式

作为操作系统软件治理的核心 进程&#xff0c;那么进程间通信的方式就非常重要&#xff0c;常见的比如管道、消息队列、共享内存、信号量、信号、Socket等。本篇主要简单介绍下 我们知道每个进程都有自己独立的用户空间&#xff0c;而内核空间是共享的。 管道 ps -ef | gre…

大数据与云计算——让我们进入数字化的新纪元

当谈论大数据和云计算时&#xff0c;我们进入了一个数字化时代的新纪元。这两个领域在科技和商业领域都有着深远的影响&#xff0c;改变了我们如何处理和存储数据&#xff0c;以及如何进行计算和分析。本文将探讨大数据和云计算的基本概念&#xff0c;它们的关系以及它们在不同…

YOLO Magic - 强化YOLOv5的视觉任务框架

YOLO Magic&#x1f680; - 强化YOLOv5的视觉任务框架 YOLO Magic&#x1fa84;是一个基于Ultralytics YOLOv5 v7.0 版本的扩展&#xff0c;旨在为视觉任务提供更强大的功能和更简单的操作。它在YOLOv5的基础上引入了丰富的网络模块&#xff0c;并提供了直观易用的Web操作界面&…

mysql如何实现根据经纬度判断某一个坐标是否在一个多边形区域范围内

要根据经纬度判断一个坐标是否在一个多边形区域内&#xff0c;MySQL提供了几种函数来处理地理空间数据&#xff0c;其中包括用于处理多边形区域的函数。 1.创建一个包含多边形区域的表&#xff1a; 首先&#xff0c;创建一个表来存储多边形区域。可以使用ST_GeomFromText函数将…

Java集合之LinedList

LinedList类实现了List接口&#xff0c;他提供了&#xff08;双向的&#xff09;链表数据结构 在该链表中的每一个元素除了存储本身的内容之外还存储指向前一个元素的指针和指向后一个元素的指针&#xff0c;下图展示了一个包含三个元素的双向链表&#xff0c;每个链表都有一个…

C#使用DirectX SDK 加载.x三维模型

最近因为项目要做显示一个三维模型&#xff0c;所以研究了下如何在Winform中加载并显示三维模型。在Windows平台巨硬公司提供了DirectX SDK用于渲染图形&#xff0c;参考了几篇文章做了个demo记录下&#xff0c;以便日后温习只用。这个SDK涉及到了计算机图形学的一些基础知识&a…

听GPT 讲Istio源代码--operator

File: istio/istioctl/pkg/waypoint/waypoint.go 在Istio项目中&#xff0c;istio/istioctl/pkg/waypoint/waypoint.go文件是istioctl的源代码之一&#xff0c;用于管理Istio的路由规则。 revision变量用于指定Istio的版本号&#xff0c;例如可以值 v1.2.3。这个版本号用于检索…

openGauss学习笔记-71 openGauss 数据库管理-创建和管理普通表-删除表中数据

文章目录 openGauss学习笔记-71 openGauss 数据库管理-创建和管理普通表-删除表中数据 openGauss学习笔记-71 openGauss 数据库管理-创建和管理普通表-删除表中数据 在使用表的过程中&#xff0c;可能会需要删除已过期的数据&#xff0c;删除数据必须从表中整行的删除。 SQL不…

arcgis拓扑检查实现多个矢量数据之间消除重叠区域

目录 环境介绍&#xff1a; 操作任务&#xff1a; 步骤&#xff1a; 1、数据库和文件结构准备 2、建立拓扑规则 3、一直下一页默认参数后&#xff0c;进行拓扑检查 4、打开TP_CK_Topology&#xff0c;会自动带出拓扑要素&#xff0c;红色区域为拓扑错误的地方&#xff1…

Python 魔法方法

视频版教程 Python3零基础7天入门实战视频教程 Python的魔法方法&#xff0c;也称为特殊方法或双下划线方法&#xff0c;是一种特殊的方法&#xff0c;用于在类中实现一些特殊的功能。这些方法的名称始终以双下划线开头和结尾&#xff0c;例如__init__&#xff0c;repr&#x…

NV040D语音芯片丨助力空气净化器语音功能

空气净化器通过过滤网和电子静电等技术&#xff0c;可以清除室内空气中的有害物质&#xff0c;如灰尘、花粉、细菌、甲醛等&#xff0c;达到净化空气的目标&#xff0c;让人们呼吸到更加清新的空气&#xff0c;保护人体健康。在空气净化器中加入九芯语音芯片的提醒功能&#xf…

jvm 内存模型介绍

一、类加载子系统 1、类加载的过程&#xff1a;装载、链接、初始化&#xff0c;其中&#xff0c;链接又分为验证、准备和解析 装载&#xff1a;加载class文件 验证&#xff1a;确保字节流中包含信息符合当前虚拟机要求 准备&#xff1a;分配内存&#xff0c;设置初始值 解析&a…

Nginx运维知识基础详解

一. nginx简介 1. nginx介绍 nginx是一个HTTP和反向代理服务器&#xff0c;邮件代理服务器&#xff0c;通用的TCP/UDP代理服务器。 反向代理服务器&#xff1a; 作用就是负载均衡 2. 编译安装 #!/bin/bash#新建文件夹存放nginx源码包 mkdir -p /nginx cd /nginx# 下载nginx压…

2023-数仓建设规范指南

一、数据模型架构原则 1. 数仓分层原则 优秀可靠的数仓体系&#xff0c;往往需要清晰的数据分层结构&#xff0c;即要保证数据层的稳定又要屏蔽对下游的影响&#xff0c;并且要避免链路过长。那么问题来了&#xff0c;一直在讲数仓要分层&#xff0c;那数仓分几层最好&#x…

redis--windows配置--redis基础

写在前面&#xff1a; 文章目录 win安装配置密码配置服务服务已经存在 可视化工具运行类型基础类型 帮助文档命令通用命令string命令hashlistsetsortedset win安装 下载地址 然后一路next就可以了。 记得添加到环境变量 配置密码 在目录打开配置文件 搜索requirepass …

任意区域的色彩一致性处理方法

影像任意感兴趣区域的色彩一致性处理方法&#xff0c;主要是针对掩膜后的影像&#xff0c;类似下图&#xff0c;对非背景区域的像素进行处理 其中非黑色部分我们叫待匀色区域。 这种处理 对于wallis 和直方图匹配 很容易实现&#xff0c;但是颜色转移就相对而言 困难点。 颜…

【JavaScript保姆级教程】输出函数和初识变量

文章目录 前言一、输出内容1.1 document.write()函数1.2 console.log()函数查看终端输出信息 1.3 alert()函数 二、变量的使用1.1 变量的声明1.3变量的赋值1.4 变量的声明和赋值 三、输入提示框的使用总结 前言 JavaScript是一种强大的脚本语言&#xff0c;广泛应用于网页开发…

Linux中swap几乎耗尽,但物理内存还有空余的现象

故障现象&#xff1a; 产生此现象的原因&#xff1a; swappiness 配额设置了偏高的值。 还有一个潜在的因素是某个程序因其自身对内存管理的缺陷&#xff0c;形成了zombie进程、且为及时关闭的处理任务还在持续消耗Mem及swap。 解决办法&#xff1a; 调低swappiness 配额值&…

数据库连接工具Chat2DB介绍

1、Chat2DB介绍 Chat2DB 是一款有开源免费的多数据库客户端工具&#xff0c;支持windows、mac本地安装&#xff0c;也支持服务器端部署&#xff0c;web网页访问。和传统的数据库客户端软件Navicat、DBeaver 相比Chat2DB集成了AIGC的能力&#xff0c;能够将自然语言转换为SQL&a…

阿里云 服务器配置端口号阿里云网页开放的一个新端口后,重启防火墙,端口未启动

问题&#xff1a; 阿里云网页开放的一个新端口后&#xff0c;重启防火墙&#xff0c;端口未启动&#xff0c;之前配置的也都停止了。 解决&#xff1a; 原因可能是阿里的服务控制了&#xff0c;只能一个个端口开启了。把新配置新端口也单独启用。 开启80端口指令 firewall-cm…