技术标签: 大前端 前端开发 react.js 项目实战 前端 react native
大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码。编写丝滑般代码会再下一篇输出,包括项目实战经验总结和踩坑,如目录架构、函数式编程、React Hook 灵活运用、常见场景、开发调试、发布部署、踩坑、性能优化
等等。
之前因为在我的技术群,收到群友@我,问能否出一个保姆级 React Native 搭建开发环境的教程,我说照着官方文档步骤操作即可。可惜事与愿违没那么顺利,流程上繁琐不够清晰,版本更新太快,网上解决方案各种说法不一,技术工具也在时时变。
由于最近我们团队有个新项目,涉及各种端的应用开发任务(如PC端、手机端、平板端、H5端),技术选型上我们前端内部经过激烈讨论(之前的项目主导前端框架是 Vue.js),最后决定全部基于 React 框架进行开发。
好处毋庸置疑,紧跟前端发展趋势尝试各种新技术。对自身加深印象,技能更上一层,实战与理论相结合,还能帮助更多新手一起打怪,对团队成员多掌握一门前端技术,不是孤军奋战,我们是一个 Team。
为何挑选 React Native
介绍 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
Node 安装
直接 Node 官网下载对应版本,不过建议使用 NVM 工具来安装与版本切换方便快捷。
我的 Node 版本是 v14.0.0,官方指定版本要求大于12以上就行。请以管理员身份安装 Node,然后一直按下一步下一步完成即可。
Yarn 安装
// 使用 npm 全局安装 yarn
npm install yarn -g
// 检查版本是否安装成功
yarn -v
配置环境变量,如下图所示:
Windows 10 平台,以管理员身份安装 python2.7,执行命令如下:
npm install --global --production windows-build-tools
我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 新建系统变量 -> path 路径新建环境变量,如下图所示:
// 检验配置是否成功
python -V
可以根据自己的电脑操作系统选择对应版本下载到本地,如下图所示:
我的电脑 -> 属性 -> 高级系统设置 -> 环境变量 -> 新建系统变量 -> path 路径新建环境变量,如下图所示:
// 检验配置是否成功
java or java -version or javac
无需单独下载安装 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 的开发环境,不用担心,按照我说的步骤执行,很快就能搭建起开发环境。
点击下载到本地,下载完成后,双击安装包,按照提示下一步下一步直到完成,如下图所示:
看到上面的界面,说明已安装成功了,点击 finish 按钮完成即可。
SDK Manager
你可以在 Android Studio 的"Preferences"菜单
中找到。具体路径是Appearance & Behavior -> System Settings -> Android SDK。如下图所示:
SDK Manager
你还可以在 Android Studio 的"Tools"菜单
中找到。如下图所示:
在 SDK Manager 中选择"SDK Platforms
“选项卡,然后在右下角勾选”Show Package Details
"。展开 Android 10 (Q)
选项,确保勾选了下面这些组件(重申你必须使用稳定的代理软件,否则可能都看不到这个界面
):
然后点击"SDK Tools
“选项卡,同样勾中右下角的”Show Package Details
"。展开"Android SDK Build-Tools
"选项,确保选中了 React Native 所必须的29.0.2版本
。你可以同时安装多个其他版本。
然后还是在"SDK Tools
“选项卡,点击”NDK (Side by side)
",同样勾中右下角的"Show Package Details
",选择20.1.5948944版本
进行安装。
最后点击"Apply
"来下载和安装这些组件。
如下图所示:
npx react-native init MyApp
再来看看下载到本地的项目目录结构,如下图所示:
我们来试试打开 Android Studio 工具,点击 open 按钮,选择对应需要导入的项目,如下图所示:
出现以下画面说明导入项目成功,如下图所示:
哎呦,妈呀,怎么回事,长得不一样呢,这是要我开发 Android 原生的节奏。一脸懵逼,手一抖,直接把 Android Studio 关了。不用着急,关掉了不碍事,重启一下工具就好了。下面我们讲讲怎么在 VSCode 编辑器工具编写丝滑般的代码。
在插件市场搜索 react 找到 React Native Tools 进行安装,如下图所示:
导入之前创建好的工程项目到 VSCode 中,如下图所示:
插件安装完成后 按F1
可以看到命令里有很多关于 React Native 的选项,如下图所示:
初始项目需要添加配置,在菜单栏点击运行 -> 添加配置 -> 选择 React Native,如下图所示:
最后 lanuch.json 文件会新增以下代码,如图所示:
直接按F5
快捷键运行 React Native 会提示报错,你还没有可用的 Android 设备,这里所指的设备既可以是真机,也可以是模拟器。如下图所示:
直接在终端编译并运行 React Native 项目,命令如下:
cd MyApp
yarn android
or
yarn react-native run-android
报错截图如下所示:
我们可以使用 Android 真机来代替模拟器进行开发,非常方便开发测试一次搞定,只需用 USB 数据线连接到我的电脑,具体操作步骤如下。
首先你需要开启 USB 调试才能自由安装开发版本的 APP。不同的手机开启方式不一样,请网上自行查阅。
手机设置 -> 系统和更新 -> 开发人员选项 -> 开启 USB 调试,如下图所示:
下面检查你的设备是否能正确连接到 ADB(Android Debug Bridge),使用adb devices
命令如图所示:
如出现安卓设备 adb 连接后显示 device unauthorized 代表设备未授权,解决方法如下:
打开手机,进入开发人员选项,找到并点击撤销 USB 调试模式
。
最后将手机重新连接电脑,依次输入指令如下命令:
adb kill-server
adb start-server
adb devices
输指令时看到手机弹出授权对话框
,点击确定或允许按钮即可。我们看到下图所示就说明 adb 授权成功了。
红框显示说明我的设备已经正确连接了。注意,你每次只需连接一个设备即可。如果你连接了多个设备(包含模拟器在内),后续的一些操作可能会失败。拔掉不需要的设备,或者关掉模拟器,确保 adb devices 的输出只有一个是连接状态。
记录一下 Android 真机调试无法安装,显示签名不一致,如下图所示:
解决方法
找到目录路径:android -> app -> build.gradle 修改默认配置文件,如下图所示:
改完后,重新运行命令yarn android
,出现以下画面说明修改成功,点击继续安装即可,如图:
查看真机界面显示效果图:
手机摇一摇,会弹出调试菜单模式,如下图所示:
你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,如下图所示:
如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备6。点击"Create Virtual Device…",然后选择所需的设备类型并点击"Next",然后选择Q API Level 29 image.
对于不熟悉不会使用 Android Studio 工具是一件费时费力的工作,所以这里推荐大家选用一个夜神模拟器开发调试 React Native,直接去官网下载安装即可,模拟器下载地址7:
VSCode 终端运行adb devices
命令发现连不上夜神模拟器,原因是 adb 版本不匹配,如图:
解决方法
将D:\Android\Sdk\platform-tools中adb.exe
拷贝到夜神模拟器安装目录中nox_adb.exe
和adb.exe
两个都替换,重启夜神模拟器即可。
如果再次执行adb devices
命名发现找不到设备(VSCode No Device),只需配置一下环境变量,再执行此命令nox_adb.exe connect 127.0.0.1:62001
即可。
夜神模拟器连接成功后,运行命令yarn android
,出现以下画面说明开发环境已搭建OK,如下图所示:
到这里真机和模拟器都可以愉快的玩耍了,修改一下 JS 文件内容,可及时看到修改后的效果。Perfect
推荐一款好用的 Android 手机投屏神器scrcpy
,有兴趣可以试试。
apt install scrcpy
brew install scrcpy
scrcpy
是通过 adb 调试的方式来将手机屏幕投到电脑上,并可以通过电脑控制你的 Android 设备。它可以通过 USB 连接,也可以通过 Wifi 连接(类似于隔空投屏),而且不需要任何 root 权限,不需要在手机里安装任何程序。scrcpy 同时适用于 GNU / Linux,Windows 和 MacOS。
具体操作详情请移步到这里:scrcpy 详细教程9
打开 VSCode 工具,点击进入扩展插件界面,搜索 react 安装自动生成代码片段插件,如下图所示:
输入rnfes
回车立马生成 React Native 代码片段,如图所示:
天河区块链前端正急缺人才,如果你想加入我们,欢迎加我微信和我联系。另外如果你想加入高质量前端交流群,或者你有任何其他事情想和我交流也可以添加我的个人微信lazycode520
。
文中如有错误,欢迎在评论区留言,如果这篇文章帮助到了你,欢迎点赞、在看和关注。你的点赞、在看和关注是对我最大的支持!
创作不易,你的每一个点赞、在看、分享都是对我最大的支持!️
文章浏览阅读145次。关于Opengl中按键过程中,渲染掉帧的处理方法在利用OpenGL进行渲染的时候,有时候需要通过按键响应来进行一些实时的操作,比如相机的移动,物体的变换等。很多一开始想到的是通过回调函数来检测按键响应,这是一种错误的做法,采用这种方法会观察到,渲染图像的变换并不流畅,就是所谓的ppt效果,发生这种情况是因为回调函数对按键进行采样的频率与opengl渲染的频率不一致导致的。因此为了保持一致,对于按键的采样应置于render函数中,例如glfw库可以采用glfwGetkey()函数对按键进行检测。..._如何解决glut摄像机移动卡顿
文章浏览阅读357次。OpenVAS漏洞扫描基础教程之OpenVAS概述及安装及配置OpenVAS服务OpenVAS基础知识OpenVAS(Open Vulnerability Assessment System)是开放式漏洞评估系统,其核心部分是一个服务器。该服务器包括一套网络漏洞测试程序,可以检测远程系统和应用程序中的安全问题。OpenVAS不同与传统的漏洞扫描软件。所有的OpenVAS软件都是免费的,而且..._在openvas设置被扫描对象至少设置哪几项
文章浏览阅读2.1k次,点赞2次,收藏12次。关于单片机读/写端口或引脚的区别及具体1个用例:一种基于STC8G1K08A最小8脚嵌入式单片机、光控及超级省电等技术的LED安全夜灯方案。_stc8g1k08a引脚图
文章浏览阅读429次。java检查注入sql框架 我在JavaOne 2012上 了解的有趣的工具之一是Checker Framework 。 Checker Framework的网页之一 指出 ,Checker Framework“增强了Java的类型系统,使其更加强大和有用”,从而使软件开发人员“能够检测并防止Java程序中的错误”。 查看Checker框架的一种方法是,实现JSR 305 (“软件缺陷检测批注..._java确认sql骨架
文章浏览阅读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
文章浏览阅读1.2k次,点赞4次,收藏18次。2020美赛回忆录|从无知少年到盲打莽撞再到最后......美赛准备方法和思想感受与启发无知期盲打莽撞期最后带上战场的资料最后的总结感受与启发由于网上关于美赛的技术性的资料很多,所以这里笔者就不重复了(技术性的资料大家在网上一搜都能搜到),本文章主要是说一下本人对于美赛准备的方法和思想,希望能帮到你们。2020年注定是难忘的一年,疫情期间,本人第一次参加了2020年的数学建模美赛,全程线上完..._美赛2020年加赛
文章浏览阅读3.3k次。GANs系列最近在调研自动生成文本方面的内容,这里我将参考了一些资料并对这些知识点进行了整理总结,初步总结如下: 目录GANsDCGANWGANGANs 生成对抗网络是一种生成模型(Generative Model),其背后基本思想是从训练库里获取很多训练样本,从而学习这些训练案例生成的概率分布。Ian Goodfellow 是对抗生成网络之父。生成对抗模型拆开来是两个东西:一个是_collapse problem csdn
文章浏览阅读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
文章浏览阅读1k次。1.先新建一个C++项目2.新建一个材质:弹出内容面板后,右键点击内容面板弹出材质编辑器后,接下来开始编辑材质。3 然后新建个C++类4然后开始编辑代码:先在项目的头文件中加上DECLARE_LOG_CATEGORY_EXTERN(YourLog, Log, All);在_创建动态材质
文章浏览阅读127次。很多使用wordpress的技术博客主都喜欢用一些HighLight Syntax的高亮语法插件,让文章中的代码段显得比较醒目和清晰;大约1个月前我也是HightLight Syntax插件众多拥垒中的一员。但今天我要说高亮插件的成本还是太高了,以我的blog为例(之前的www.youyus.com),highlight syntax插件包含的多个语法JavaScript脚本导致单个页面的载入需要..._css style mos
文章浏览阅读3k次。品味第一杯咖啡 一、注释与文档 之所以把Java注释和文档功能放在最前面介绍,是因为Java程序的理念使然——所谓兵马未动粮草先行。 几乎所有编程语言都提供在源代码中添加注释的功能,开发者通过注释给自己或代码的阅读者进行备忘或提示,好比读书时在书上的空白处写笔记,或在屋子里使用N次贴。Java语言一个优秀思想便是——编写源代码并非唯一重要的工作,给源代码加上详细的注释同样重要。道理很_java简单咖啡厅程序设计