【React Native】第一个Android应用

这篇具有很好参考价值的文章主要介绍了【React Native】第一个Android应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

环境

Windows -- Android

TIP

你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境

开发工具环境及版本要求

Node 版本请保持在:NodeJs > 16.0
请下载 Java SE Development Kit (JDK):JDK

建议

\\\\\ 安装完 NodeJs 请尽量切换 npm 镜像源 \\\\\ 或使用科学上网工具 \\\\\ 或使用 yarn 代替 npm \\\\\

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

官方建议

强烈建议始终选择 Node 当前的 LTS (长期维护)版本,一般是偶数版本,不要选择偏实验性质的奇数版本
不要使用 cnpmcnpm 安装的模块路径比较奇怪,packager 不能正常识别!

安装 Android Studio

Android Studio 官网
一路点击 NEXT 下一步一直到安装完成

首次安装模板选择

安装界面中选择 "Custom" 选项,确保选中了以下几项:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

下载一个 ZIP 可能会卡一会,正常现象,如果长时间不动(10 - 20min???)请科学上网,访问资源为 Google

安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK, 目前编译 React Native 应用需要的是 Android 13 (Tiramisu) 版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 Android 5 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK

你可以在 Android Studio 的欢迎界面中找到 SDK Manager, 点击 "Configure" ,然后就能看到 "SDK Manager"

【React Native】第一个Android应用,React-Native,react native,android,react.js

SDK Manager 还可以在 Android Studio"Preferences" 菜单中找到,具体路径是 Appearance & Behavior → System Settings → Android SDK

SDK Manager 中选择 "SDK Platforms" 选项卡,然后在右下角勾选 "Show Package Details", 展开 Android 13 (Tiramisu)选项,确保勾选了下面这些组件(如果你看不到这个界面,则需要使用稳定的代理软件)

  • Android SDK Platform 33
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击 "SDK Tools" 选项卡,同样勾中右下角的 "Show Package Details",展开 "Android SDK Build-Tools" 选项,确保选中了 React Native 所必须的 33.0.0版本,你可以同时安装多个其他版本

最后点击 "Apply" 来下载和安装这些组件

配置 ANDROID_HOME 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为 ANDROID_HOME 的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认)

【React Native】第一个Android应用,React-Native,react native,android,react.js
SDK 默认是安装在下面的目录

C:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的 "Preferences" 菜单中查看 SDK 的真实路径,具体是 Appearance & BehaviorSystem SettingsAndroid SDK

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效

把一些工具目录添加到环境变量 Path

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用

npx react-native@latest init AwesomeProject

成功是这样的
【React Native】第一个Android应用,React-Native,react native,android,react.js

[可选参数] 指定版本或项目模板

npx react-native@X.XX.X init AwesomeProject --version X.XX.X

运行

可以用真机 也可以用模拟机

使用 Android 模拟器

你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用 "AVD Manager" 来查看可用的虚拟设备,它的图标看起来像下面这样

【React Native】第一个Android应用,React-Native,react native,android,react.js

如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备,点击 "Create Virtual Device...",然后选择所需的设备类型并点击 "Next",然后选择 Tiramisu API Level 33 image

请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行 yarn android 或者 yarn react-native run-android

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

此命令会对项目的原生部分进行编译,同时在另外一个命令行中启动Metro服务对 js 代码进行实时打包处理(类似 webpack),Metro 服务也可以使用 yarn start 命令单独启动

如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行,注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟,此过程严重依赖稳定的代理软件,否则将频繁遭遇链接超时和断开,导致无法运行

npx react-native run-android 只是运行应用的方式之一,你也可以在 Android Studio 中直接运行应用

如果你无法正常运行,遇到奇奇怪怪的红屏错误,先回头仔细对照文档检查,不同时期不同版本可能会碰到不同的问题,我们会在论坛中及时解答更新,但请注意千万不要执行 bundle 命令,那样会导致代码完全无法刷新

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了文章来源地址https://www.toymoban.com/news/detail-778100.html

  • 使用你喜欢的文本编辑器打开 App.js 并随便改上几行
  • 按两下 R 键,或是在开发者菜单中选择 Reload,就可以看到你的最新修改

到了这里,关于【React Native】第一个Android应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react-Native init初始化项目报错”TypeError: cli.init is not a function“

    在react-native init appDemo 创建项目时,报错TypeError: cli.init is not a function。 产生这个问题的原因是:使用这种方式创建工程,react-native版本是0.69 版本上不适用。可以检查下自己安装的React-native的版本。 使用: npx react-native init Demo --version 0.68.2 即可。 解决方法不好用的话,那就

    2024年02月15日
    浏览(44)
  • 工欲善其事,必先利其器之—react-native-debugger调试react native应用

    调试react应用通常利用chrome的inspector的功能和两个最常用的扩展 1、React Developer Tools (主要用于debug组件结构) 2、Redux DevTools (主要用于debug redux store的数据) 对于react native应用,我们一般就使用react-native-debugger了,它是一个独立的应用,需要单独安装,在mac下可以用如下命令

    2024年02月16日
    浏览(31)
  • 创建React Native的第一个hello world工程

    需要安装好node、npm环境 如果之前没有安装过 react-native-cli 脚手架的,可以按照下述步骤直接安装。如果已经安装过的,但是在使用这个脚手架初始化工程的时候遇到下述报错的话 也可以先直接卸载 正常安装过程: 安装 react-native-cli 安装 react-native 安装完成之后,可以用脚手

    2024年02月07日
    浏览(46)
  • 探索React Native认证实战示例项目:打造安全的移动应用体验

    项目地址:https://gitcode.com/hezhii/react-native-auth-example 在移动开发领域,React Native以其跨平台和高效性能而备受青睐。如果你正在寻找一个直观的、基于React Native的身份验证实现示例,那么这个项目—— react-native-auth-example ,将会是你的理想之选。 react-native-auth-example 是一个简单

    2024年04月27日
    浏览(41)
  • react native android环境搭建,使用夜神模拟器进行开发(适用于0.73+版本)

    前言 本文基于:“react-native” : “^0.73.0” 1.安装 Node Node.js,下载时选择 = 18 版本 2.下载并安装 JDK Java SE Development Kit (JDK),下载时选择 17 版本 安装 验证是否安装成功 打开命令提示符输入 javac -version 回车 3.安装 Android Studio 下载并安装 Android Studio ,获取编译 Android 应用所需

    2024年01月23日
    浏览(65)
  • React Native连接Zebra斑马打印机通过发送CPCL指令打印(Android 和 iOS通用)

    自 2015 年发布以来,React Native 已成为用于构建数千个移动应用程序的流行跨平台移动开发框架之一。通常,我们有开发人员询问如何将 Link-OS SDK 与 React Native 应用程序集成,以便在 Zebra 打印机上打印标签。在本教程中,我们将逐步介绍如何将 Link-OS SDK 添加到 Android 和 iOS 版

    2024年02月14日
    浏览(45)
  • 【React Native】运行Android时发生Required for building and installing your app on Android

    Android SDK - Required for building and installing your app on Android Versions found: N/A Version supported: 33.0.0 查看gradle-wrapper.properties内的gradle版本是否存在 可以配置为本地路径 distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists distributionUrl=file:///D:/Deve

    2024年02月03日
    浏览(61)
  • react native 0.73 配置 react-native-fs

    npm yarn android/settings.gradle android/app/build.gradle androidappsrcmainjavacomreactnative_demoMainApplication.kt 把原代码 改为

    2024年04月08日
    浏览(43)
  • 探索React Native的世界:gorhom/react-native-animated-tabbar

    项目地址:https://gitcode.com/gorhom/react-native-animated-tabbar 在移动应用开发领域,React Native以其高效、跨平台的能力受到了广泛的欢迎。今天,我们要向您推荐一个极具创意且实用的React Native组件库——gorhom/react-native-animated-tabbar。它是一个精美设计的动画TabBar,为您的应用提供生

    2024年04月17日
    浏览(82)
  • React与React Native的异同

    开发React一段时间了,一直没有搞清楚React和React Native的差异。今天特意去了解下,发现差异还真不小! 相同点: 1.都是Facebook公司推出的框架。 2.都是基于JSX语言开发的。 差异点: 1、作用的平台不同. 2、工作原理不同. 3、渲染周期不同. 4、组件构成形式不同. 5、宿主平台的

    2024年02月06日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包