超详细 React Native 入坑使用指南,我在元宇宙等你_reactnative global-程序员宅基地

技术标签: 大前端  前端开发  react.js  项目实战  前端  react native  

前言

大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出,包括项目实战经验总结和踩坑,如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化等等。

之前因为在我的技术群,收到群友@我,问能否出一个保姆级 React Native 搭建开发环境的教程,我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利,流程上繁琐不够清晰,版本更新太快,网上解决方案各种说法不一,技术工具也在时时变。

由于最近我们团队有个新项目,涉及各种端的应用开发任务(如PC端、手机端、平板端、H5端),技术选型上我们前端内部经过激烈讨论(之前的项目主导前端框架是 Vue.js),最后决定全部基于 React 框架进行开发。

好处毋庸置疑,紧跟前端发展趋势尝试各种新技术。对自身加深印象,技能更上一层,实战与理论相结合,还能帮助更多新手一起打怪,对团队成员多掌握一门前端技术,不是孤军奋战,我们是一个 Team。

1.jpg

为何挑选 React Native

  • 大公司背书技术已成熟
  • 社区活跃开发者多
  • 基于 React 易上手开发效率高
  • 跨平台兼容性
  • 接近原生应用
  • 秒速刷新
  • 节约公司成本
  • 一次学习,随处编写

介绍 React Native

React Native(简称 RN)是 Facebook 于2015年4月开源的跨平台移动应用开发框架,是 Facebook 早先开源的 JS 框架 React 在原生移动应用平台的衍生产物,支持 iOS 和安卓两大平台。RN 使用 Javascript 语言,类似于 HTML 的 JSX,以及 CSS 来开发移动应用,因此熟悉 Web 前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

仅供参考

最佳实践完美组合技术栈:React + RN + ES6 + Flex + Hook + Function Component + Axios

前置知识

  • HTML + CSS + JS(基础)
  • React v17.0.2(基础)
  • React Hook
  • RN v0.66
  • Flex 布局
  • ES6/7/8
  • Ajax(Axios)
  • Node v14.0.0+
  • Android Studio
  • 中文版官方文档不离手(React1 & React Native2

环境搭建

  • 操作系统:win10 专业版
  • 手机:安卓手机真机一部 & 夜神模拟器一个
  • 必须安装依赖:Node、Yarn、JDK、Android Studio(Android SDK)、Python2、Xcode(Mac)

Node 安装

直接 Node 官网下载对应版本,不过建议使用 NVM 工具来安装与版本切换方便快捷。

NVM 官网下载地址3

我的 Node 版本是 v14.0.0,官方指定版本要求大于12以上就行。请以管理员身份安装 Node,然后一直按下一步下一步完成即可。

Yarn 安装

// 使用 npm 全局安装 yarn
npm install yarn -g

// 检查版本是否安装成功
yarn -v

配置环境变量,如下图所示:

7.png

8.png

python2 安装与配置

Windows 10 平台,以管理员身份安装 python2.7,执行命令如下:

npm install --global --production windows-build-tools

我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 新建系统变量 -> path 路径新建环境变量,如下图所示:

5.png

// 检验配置是否成功
python -V

6.png

JDK 安装与配置

JDK 下载安装

JDK 1.8官网下载地址4

可以根据自己的电脑操作系统选择对应版本下载到本地,如下图所示:

1.png

JDK 环境变量配置

我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 新建系统变量 -> path 路径新建环境变量,如下图所示:

2.png

3.png

// 检验配置是否成功
java or java -version or javac

4.png

Android Studio 下载与安装

无需单独下载安装 Android SDK 依赖,而是通过安装 Android Studio 开发工具,会默认安装最新版 Android SDK。目前编译 React Native 应用需要的是 Android 10 (Q)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android 4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

首先去官网下载 Android Studio 开发工具5

之前从未接触过 Android 的开发环境,不用担心,按照我说的步骤执行,很快就能搭建起开发环境。

11.png

点击下载到本地,下载完成后,双击安装包,按照提示下一步下一步直到完成,如下图所示:

13.png

14.png

15.png

16.png

17.png

18.png

看到上面的界面,说明已安装成功了,点击 finish 按钮完成即可。

Android SDK 安装

SDK Manager 你可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior -> System Settings -> Android SDK。如下图所示:

19.png

20.png

SDK Manager 你还可以在 Android Studio 的"Tools"菜单中找到。如下图所示:

21.png

在 SDK Manager 中选择"SDK Platforms“选项卡,然后在右下角勾选”Show Package Details"。展开 Android 10 (Q)选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面):

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

23.png

24.png

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

25.png

然后还是在"SDK Tools“选项卡,点击”NDK (Side by side)",同样勾中右下角的"Show Package Details",选择20.1.5948944版本进行安装。

22.png

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

Android SDK 配置环境变量

如下图所示:

9.png

10.png

初始化项目

npx react-native init MyApp

26.png

再来看看下载到本地的项目目录结构,如下图所示:

30.png

我们来试试打开 Android Studio 工具,点击 open 按钮,选择对应需要导入的项目,如下图所示:

27.png

28.png

出现以下画面说明导入项目成功,如下图所示:

29.png

哎呦,妈呀‍,怎么回事,长得不一样呢,这是要我开发 Android 原生的节奏。一脸懵逼,手一抖,直接把 Android Studio 关了。不用着急,关掉了不碍事,重启一下工具就好了。下面我们讲讲怎么在 VSCode 编辑器工具编写丝滑般的代码。

VSCode 搭建 React Native

安装 React Native Tools

在插件市场搜索 react 找到 React Native Tools 进行安装,如下图所示:

31.png

导入之前创建好的工程项目到 VSCode 中,如下图所示:

32.png

插件安装完成后 按F1可以看到命令里有很多关于 React Native 的选项,如下图所示:

33.png

初始项目需要添加配置,在菜单栏点击运行 -> 添加配置 -> 选择 React Native,如下图所示:

36.png

37.png

38.png

39.png

40.png

最后 lanuch.json 文件会新增以下代码,如图所示:

41.png

直接按F5快捷键运行 React Native 会提示报错,你还没有可用的 Android 设备,这里所指的设备既可以是真机,也可以是模拟器。如下图所示:

42.png

直接在终端编译并运行 React Native 项目,命令如下:

cd MyApp
yarn android
or
yarn react-native run-android

报错截图如下所示:

43.png

准备安卓设备

使用 Android 真机

我们可以使用 Android 真机来代替模拟器进行开发,非常方便开发测试一次搞定,只需用 USB 数据线连接到我的电脑,具体操作步骤如下。

  • 开启 USB 调试

首先你需要开启 USB 调试才能自由安装开发版本的 APP。不同的手机开启方式不一样,请网上自行查阅。

手机设置 -> 系统和更新 -> 开发人员选项 -> 开启 USB 调试,如下图所示:

2.jpg

  • 通过 USB 数据线连接设备

下面检查你的设备是否能正确连接到 ADB(Android Debug Bridge),使用adb devices命令如图所示:

45.png

如出现安卓设备 adb 连接后显示 device unauthorized 代表设备未授权,解决方法如下:

打开手机,进入开发人员选项,找到并点击撤销 USB 调试模式

最后将手机重新连接电脑,依次输入指令如下命令:

adb kill-server
adb start-server
adb devices

45.png

输指令时看到手机弹出授权对话框,点击确定或允许按钮即可。我们看到下图所示就说明 adb 授权成功了。

3.jpg

红框显示说明我的设备已经正确连接了。注意,你每次只需连接一个设备即可。如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保 adb devices 的输出只有一个是连接状态。

记录一下 Android 真机调试无法安装,显示签名不一致,如下图所示:

48.png

解决方法

找到目录路径:android -> app -> build.gradle 修改默认配置文件,如下图所示:

50.png

改完后,重新运行命令yarn android,出现以下画面说明修改成功,点击继续安装即可,如图:

49.png

47.png

查看真机界面显示效果图:

6.jpg

手机摇一摇,会弹出调试菜单模式,如下图所示:

7.jpg

  • Reload
    刷新页面,修改JS文件时,刷新功能才起作用,如新增文件或修改原生代码都需重新编译应用才会生效。
  • Change Bundle Location
    改变打包后的URL地址
  • Show Element Inspector
    是否显示元素检查器,查看到当前选中元素的位置、样式、层级关系、盒子模型信息等等,方便我们快速定位问题。
  • Disable Fast Refresh
    禁止快速刷新
  • Show Perf Monitor
    是否显示监控窗口,实时展示内存占用、UI 和 JS 的 FPS 等信息,帮助我们调试性能问题。
  • Settings
    性能调试设置
  • Enable Sampling Profiler
    是否开启采样分析器
  • Debug
    开启远程调试,可通过Chrome Developer Tools工具调试程序。选中后将打开网址为http://localhost:8081/debugger-ui/

51.png

使用 Android 模拟器

你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,如下图所示:

52.png

53.png

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

54.png

对于不熟悉不会使用 Android Studio 工具是一件费时费力的工作,所以这里推荐大家选用一个夜神模拟器开发调试 React Native,直接去官网下载安装即可,模拟器下载地址7

55.png

56.png

VSCode 终端运行adb devices命令发现连不上夜神模拟器,原因是 adb 版本不匹配,如图:

57.png

解决方法

将D:\Android\Sdk\platform-tools中adb.exe拷贝到夜神模拟器安装目录中nox_adb.exeadb.exe 两个都替换,重启夜神模拟器即可。

如果再次执行adb devices命名发现找不到设备(VSCode No Device),只需配置一下环境变量,再执行此命令nox_adb.exe connect 127.0.0.1:62001即可。

58.png

59.png

夜神模拟器连接成功后,运行命令yarn android,出现以下画面说明开发环境已搭建OK,如下图所示:

44.png

到这里真机和模拟器都可以愉快的玩耍了,修改一下 JS 文件内容,可及时看到修改后的效果。Perfect

手机屏幕投影工具

推荐一款好用的 Android 手机投屏神器scrcpy,有兴趣可以试试。

  • Linux: apt install scrcpy
  • Windows: 下载地址8
  • macOS: brew install scrcpy

scrcpy是通过 adb 调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制你的 Android 设备。它可以通过 USB 连接,也可以通过 Wifi 连接(类似于隔空投屏),而且不需要任何 root 权限,不需要在手机里安装任何程序。scrcpy 同时适用于 GNU / Linux,Windows 和 MacOS。

具体操作详情请移步到这里:scrcpy 详细教程9

VSCode 插件

打开 VSCode 工具,点击进入扩展插件界面,搜索 react 安装自动生成代码片段插件,如下图所示:

60.png

输入rnfes回车立马生成 React Native 代码片段,如图所示:

61.png

62.png

相关资料

    1. React 官方文档:https://zh-hans.reactjs.org/
    1. React Native 官方文档:https://www.react-native.cn/
    1. NVM 官网下载:https://github.com/coreybutler/nvm-windows/releases
    1. JDK 1.8 官网下载:https://www.oracle.com/java/technologies/downloads/#java8-windows
    1. Android Studio 工具下载:https://developer.android.google.cn/studio/
    1. Android 虚拟设备指南:https://developer.android.com/studio/run/managing-avds.html
    1. 夜神模拟器下载地址:https://www.yeshen.com/
    1. Windows 10 手机投屏神器下载地址:https://github.com/Genymobile/scrcpy/releases/download/v1.21/scrcpy-win64-v1.21.zip
    1. scrcpy 详细教程:https://blog.csdn.net/was172/article/details/99705855

结语

天河区块链前端正急缺人才,如果你想加入我们,欢迎加我微信和我联系。另外如果你想加入高质量前端交流群,或者你有任何其他事情想和我交流也可以添加我的个人微信lazycode520

文中如有错误,欢迎在评论区留言,如果这篇文章帮助到了你,欢迎点赞、在看和关注。你的点赞、在看和关注是对我最大的支持!

创作不易,你的每一个点赞、在看、分享都是对我最大的支持!️

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_15041931/article/details/122024219

智能推荐

2021-08-16_如何解决glut摄像机移动卡顿-程序员宅基地

文章浏览阅读145次。关于Opengl中按键过程中,渲染掉帧的处理方法在利用OpenGL进行渲染的时候,有时候需要通过按键响应来进行一些实时的操作,比如相机的移动,物体的变换等。很多一开始想到的是通过回调函数来检测按键响应,这是一种错误的做法,采用这种方法会观察到,渲染图像的变换并不流畅,就是所谓的ppt效果,发生这种情况是因为回调函数对按键进行采样的频率与opengl渲染的频率不一致导致的。因此为了保持一致,对于按键的采样应置于render函数中,例如glfw库可以采用glfwGetkey()函数对按键进行检测。..._如何解决glut摄像机移动卡顿

OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务-程序员宅基地

文章浏览阅读357次。OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务OpenVAS基础知识OpenVAS(Open Vulnerability Assessment System)是开放式漏洞评估系统,其核心部分是一个服务器。该服务器包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题。OpenVAS不同与传统的漏洞扫描软件。所有的OpenVAS软件都是免费的,而且..._在openvas设置被扫描对象至少设置哪几项

单片机读/写端口或引脚区别及具体1个用例(一种基于STC8G1K08A最小8脚嵌入式单片机LED安全夜灯方案)_stc8g1k08a引脚图-程序员宅基地

文章浏览阅读2.1k次,点赞2次,收藏12次。关于单片机读/写端口或引脚的区别及具体1个用例:一种基于STC8G1K08A最小8脚嵌入式单片机、光控及超级省电等技术的LED安全夜灯方案。_stc8g1k08a引脚图

java检查注入sql框架_Java:检查器框架-程序员宅基地

文章浏览阅读429次。java检查注入sql框架 我在JavaOne 2012上 了解的有趣的工具之一是Checker Framework 。 Checker Framework的网页之一 指出 ,Checker Framework“增强了Java的类型系统,使其更加强大和有用”,从而使软件开发人员“能够检测并防止Java程序中的错误”。 查看Checker框架的一种方法是,实现JSR 305 (“软件缺陷检测批注..._java确认sql骨架

weak实现原理_说一下weak关键词,weak实现原理-程序员宅基地

文章浏览阅读929次。在ARC模式中weak关键字常常用来处理对象之间的互相强引用导致的内存泄漏问题,主要是因为使用weak修饰变量不会导致引用计数的增加不会影响对象的生命周期,而且在对象释放之后会将自动指针置空避免也指针访问问题.那么系统是和实现weak管理的?定义weak实现文件首先在Xcode中,打开汇编调试Xcode->Debug->Debug Workflow->Always S..._说一下weak关键词,weak实现原理

手语翻译系统_如何建立一个神经网络将手语翻译成英语-程序员宅基地

文章浏览阅读1.6k次,点赞3次,收藏26次。手语翻译系统The author selected Code Org to receive a donation as part of the Write for DOnations program. 作者选择Code Org接受捐赠,这是Write for DOnations计划的一部分。 介绍 (Introduction)Computer vision is a subfield o..._sign-language-translator

随便推点

2020美赛回忆录|平生第一次打美赛的获奖方式......美赛准备方法和思想_美赛2020年加赛-程序员宅基地

文章浏览阅读1.2k次,点赞4次,收藏18次。2020美赛回忆录|从无知少年到盲打莽撞再到最后......美赛准备方法和思想感受与启发无知期盲打莽撞期最后带上战场的资料最后的总结感受与启发由于网上关于美赛的技术性的资料很多,所以这里笔者就不重复了(技术性的资料大家在网上一搜都能搜到),本文章主要是说一下本人对于美赛准备的方法和思想,希望能帮到你们。2020年注定是难忘的一年,疫情期间,本人第一次参加了2020年的数学建模美赛,全程线上完..._美赛2020年加赛

GANs系列_collapse problem csdn-程序员宅基地

文章浏览阅读3.3k次。GANs系列最近在调研自动生成文本方面的内容,这里我将参考了一些资料并对这些知识点进行了整理总结,初步总结如下: 目录GANsDCGANWGANGANs 生成对抗网络是一种生成模型(Generative Model),其背后基本思想是从训练库里获取很多训练样本,从而学习这些训练案例生成的概率分布。Ian Goodfellow 是对抗生成网络之父。生成对抗模型拆开来是两个东西:一个是_collapse problem csdn

node.js入门_Node.js中的压缩入门-程序员宅基地

文章浏览阅读381次。node.js入门Compression in Node.js and Express decreases the downloadable amount of data that’s served to users. Through the use of this compression, we can improve the performance of our Node.js applica..._nodejs x-no-compression

动态材质的创建:使用C++与材质编辑器进行通信_创建动态材质-程序员宅基地

文章浏览阅读1k次。1.先新建一个C++项目2.新建一个材质:弹出内容面板后,右键点击内容面板弹出材质编辑器后,接下来开始编辑材质。3 然后新建个C++类4然后开始编辑代码:先在项目的头文件中加上DECLARE_LOG_CATEGORY_EXTERN(YourLog, Log, All);在_创建动态材质

如何使用MOS风格的代码背景?-程序员宅基地

文章浏览阅读127次。很多使用wordpress的技术博客主都喜欢用一些HighLight Syntax的高亮语法插件,让文章中的代码段显得比较醒目和清晰;大约1个月前我也是HightLight Syntax插件众多拥垒中的一员。但今天我要说高亮插件的成本还是太高了,以我的blog为例(之前的www.youyus.com),highlight syntax插件包含的多个语法JavaScript脚本导致单个页面的载入需要..._css style mos

Java咖啡馆---品味第一杯咖啡_java简单咖啡厅程序设计-程序员宅基地

文章浏览阅读3k次。品味第一杯咖啡 一、注释与文档   之所以把Java注释和文档功能放在最前面介绍,是因为Java程序的理念使然——所谓兵马未动粮草先行。  几乎所有编程语言都提供在源代码中添加注释的功能,开发者通过注释给自己或代码的阅读者进行备忘或提示,好比读书时在书上的空白处写笔记,或在屋子里使用N次贴。Java语言一个优秀思想便是——编写源代码并非唯一重要的工作,给源代码加上详细的注释同样重要。道理很_java简单咖啡厅程序设计