使用 React Native 针对 Android 进行开发

 🎬 岸边的风:个人主页

 🔥 个人专栏 :《 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 thisscreen 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.mzph.cn/news/80336.shtml

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

相关文章

性能测试工具有哪些?原理是什么?怎么选择适合的工具?

前言 本篇文章主要简单总结下性能测试工具的原理以及如何选型。性能测试和功能测试不同&#xff0c;性能测试的执行是基本功能的重复和并发&#xff0c;需要模拟多用户&#xff0c;在性能测试执行时需要监控指标参数&#xff0c;同时性能测试的结果不是那么显而易见&#xff0…

43.228.64.X游戏盾在业务高峰时间段,出现用户大量掉线问题,可能是什么原因导致

服务器负载过高&#xff1a;业务高峰期间&#xff0c;服务器可能无法处理大量的用户请求&#xff0c;导致性能下降&#xff0c;甚至引起服务器崩溃&#xff0c;从而导致用户掉线。 网络带宽不足&#xff1a;当大量用户同时访问游戏盾时&#xff0c;网络带宽可能不足以支持所有…

Smart Community(1)之设计规范

通过前面大数据开发相关知识的学习&#xff0c;准备做一个项目进行练习---我给他起了一个响亮的名字&#xff1a;基于HadoopHA的智慧社区服务平台 设计规范&#xff1a; 做一个项目之前肯定要先规定一些开发过程中的设计规范 &#xff08;一&#xff09;数据埋点规范&#xf…

linux jenkins2.414.1-1.1版本安装

文章目录 前言一、rpm文件下载二、安装jenkins2.1.升级jdk1.82.2安装jenkins2.3 启动服务2.4 使用密码登录2.5 修改插件源2.6 汉化插件安装演示 总结 前言 之前也安装过jenkins&#xff0c;但是那个版本是2.1的&#xff0c;太老了很多插件都不支持&#xff0c;现在安装目前为止…

XSS笔记

一、xss漏洞通常是通过php的输出函数将javascript代码输出到html页面中&#xff0c;通过用户本地浏览器执行的&#xff0c;所以xss漏洞关键就是寻找参数未过滤的输出函数。 二、XSS的攻击方式 1、 反射型XSS&#xff1a;<非持久化> 攻击者事先制作好攻击链接, 需要欺骗用…

RocketMq(一)安装部署

一、linux单机部署&#xff1a; 1、到apache官网下载 | RocketMQ (apache.org)下载binary zip包&#xff0c;如我下载的4.9.6版本。 上传到建好的/usr/local/rocketmq目录下。 2、解压zip包 unzip rocketmq-all-4.9.6-bin-release.zip 3、进入解压后的文件夹,启动 Name Serv…

vue之$emit返回值

使用场景&#xff1a;子组件调用父组件的方法并获取到父组件方法的返回值 方法(一): 回调函数: 1.子组件方法&#xff1a; ……methods:{ShowMore(step){this.$emit("ChildClick",step,(res)>{//回调函数的方法体.处理自己的业务.});}}…… 2、父组件方法 ……

java23种设计模式与追MM

1、FACTORY—追MM少不了请吃饭了&#xff0c;麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西&#xff0c;虽然口味有所不同&#xff0c;但不管你带MM去麦当劳或肯德基&#xff0c;只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 工厂模式&#xff1a…

02目标检测-传统检测方法

目录 一、目标学习的检测方法变迁及对比 二、 基于传统手工特征的检测算法的定义 三、传统主要手工特征与算法 Haar特征与 人脸检测算法 - Viola-Jones(了解) HOG特征与 SVM 算法(了解)&#xff08;行人检测、opencv实现&#xff09; SIFT特征与SIFT算法(了解) DPM&#…

redis--windows配置--redis基础

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

Fluent实现大量气泡的随机分布案例

1、问题介绍 气液两相管流在石油、化工、能源、制冷等工业领域中大量存在。气泡在生存发展过程中往往会导致噪声和引起管道振动&#xff0c;自来水管路中如有空气时往往会产生啸叫声和管道剧烈振动。掌握流动过程中气泡的生成、发展及其破裂等动力规律是控制气液两相流气动噪声…

C++qt day8

1.用代码实现简单的图形化界面&#xff08;并将工程文件注释&#xff09; 头文件 #ifndef MYWIDGET_H #define MYWIDGET_H //防止头文件冲突#include <QWidget> //父类的头文件class MyWidget : public QWidget //自定义自己的界面类&#xff0c;公共继承…

【pygame】01 pygame制作游戏的最小系统

这次使用sublimepython进行pygame的游戏开发&#xff0c;目的是学习使用python的基本操作和常用模块 添加一个文件夹到工程 最小系统 1.导入使用的模块 2.初始化&#xff1a;pygame.init函数包含了各个子模块的初始化&#xff0c;可以重复调用 3.pygame.display.set_mode返…

<OpenCV> Mat属性

OpenCV的图像数据类型可参考之前的博客&#xff1a;https://blog.csdn.net/thisiszdy/article/details/120238017 OpenCV-Mat类型的部分属性如下&#xff1a; size&#xff1a;矩阵的大小&#xff0c; s i z e ( c o l s , r o w s ) size(cols,rows) size(cols,rows)&#xf…

Java手写选择排序和算法案例拓展

Java手写选择排序和算法案例拓展 1. Mermanid代码表示思维导图解释实现思路原理 #mermaid-svg-uD2bB5QreLEC3dsv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-uD2bB5QreLEC3dsv .error-icon{fill:#552222;}#merm…

浅谈机器视觉目前的发展现状

#【中秋征文】程序人生&#xff0c;中秋共享# 机器视觉是一个快速发展的行业&#xff0c;被广泛应用于许多领域&#xff0c;包括制造业、农业、医药行业、包装印刷业等。在制造业中&#xff0c;机器视觉技术被广泛应用于自动化生产线上&#xff0c;用于检测、识别、测量和定位…

数据治理在数字化转型中的重要性

在当今数字化时代&#xff0c;企业的成功与否往往取决于它们对数据的处理和管理能力。数据治理作为数字化转型的关键组成部分&#xff0c;对于帮助企业有效管理和利用数据&#xff0c;实现业务增长和创新至关重要。本文将探讨为什么数字化转型必须进行数据治理&#xff0c;并介…

新能源汽车驱动电机的基本知识

学习目标:了解电机的基本知识。能力目标:培养学生搜集和整理相关资料的能力。素质目标:培养学生良好的职业素养。额定电店.在夫见定条件下电池工作的*于佳 电压知识准备术语和定义。 (1)驱动电机系统 通过有效的控制策略将动力蓄电池提供的直流电转化为交流实现电机的正转以及反…

【Shiro】入门概述

1.是什么 Apache Shiro 是一个功能强大且易于使用的 Java 安全(权限)框架。Shiro 可以完 成&#xff1a;认证、授权、加密、会话管理、与 Web 集成、缓存 等。借助 Shiro 您可以快速轻松 地保护任何应用程序——从最小的移动应用程序到最大的 Web 和企业应用程序。 官网&…

LeetCode 每日一题 2023/9/11-2023/9/17

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 9/11 630. 课程表 III9/12 1462. 课程表 IV9/13 2596. 检查骑士巡视方案9/14 1222. 可以攻击国王的皇后9/15 LCP 50. 宝石补给9/16 198. 打家劫舍9/17 9/11 630. 课程表 II…