超详细 React Native 完全使用指南,学不会你打我

前言

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

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

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

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

超详细 React Native 完全使用指南,学不会你打我_第1张图片

为何挑选 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 

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

超详细 React Native 完全使用指南,学不会你打我_第2张图片 超详细 React Native 完全使用指南,学不会你打我_第3张图片

python2 安装与配置

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

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

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

超详细 React Native 完全使用指南,学不会你打我_第4张图片
// 检验配置是否成功
python -V 
超详细 React Native 完全使用指南,学不会你打我_第5张图片

JDK 安装与配置

JDK 下载安装

JDK 1.8官网下载地址4

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

超详细 React Native 完全使用指南,学不会你打我_第6张图片
JDK 环境变量配置

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

超详细 React Native 完全使用指南,学不会你打我_第7张图片
// 检验配置是否成功
java or java -version or javac 
超详细 React Native 完全使用指南,学不会你打我_第8张图片

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 的开发环境,不用担心,按照我说的步骤执行,很快就能搭建起开发环境。

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

超详细 React Native 完全使用指南,学不会你打我_第9张图片 超详细 React Native 完全使用指南,学不会你打我_第10张图片 超详细 React Native 完全使用指南,学不会你打我_第11张图片 超详细 React Native 完全使用指南,学不会你打我_第12张图片 超详细 React Native 完全使用指南,学不会你打我_第13张图片

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

Android SDK 安装

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

超详细 React Native 完全使用指南,学不会你打我_第14张图片 超详细 React Native 完全使用指南,学不会你打我_第15张图片

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

超详细 React Native 完全使用指南,学不会你打我_第16张图片

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

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)
超详细 React Native 完全使用指南,学不会你打我_第17张图片 超详细 React Native 完全使用指南,学不会你打我_第18张图片

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

超详细 React Native 完全使用指南,学不会你打我_第19张图片

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

超详细 React Native 完全使用指南,学不会你打我_第20张图片

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

Android SDK 配置环境变量

如下图所示:

超详细 React Native 完全使用指南,学不会你打我_第21张图片 超详细 React Native 完全使用指南,学不会你打我_第22张图片

初始化项目

npx react-native init MyApp 
超详细 React Native 完全使用指南,学不会你打我_第23张图片

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

超详细 React Native 完全使用指南,学不会你打我_第24张图片

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

超详细 React Native 完全使用指南,学不会你打我_第25张图片 超详细 React Native 完全使用指南,学不会你打我_第26张图片

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

超详细 React Native 完全使用指南,学不会你打我_第27张图片

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

VSCode 搭建 React Native

安装 React Native Tools

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

超详细 React Native 完全使用指南,学不会你打我_第28张图片

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

超详细 React Native 完全使用指南,学不会你打我_第29张图片

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

超详细 React Native 完全使用指南,学不会你打我_第30张图片

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

超详细 React Native 完全使用指南,学不会你打我_第31张图片 超详细 React Native 完全使用指南,学不会你打我_第32张图片 超详细 React Native 完全使用指南,学不会你打我_第33张图片 超详细 React Native 完全使用指南,学不会你打我_第34张图片 超详细 React Native 完全使用指南,学不会你打我_第35张图片

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

超详细 React Native 完全使用指南,学不会你打我_第36张图片

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

超详细 React Native 完全使用指南,学不会你打我_第37张图片

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

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

报错截图如下所示:

超详细 React Native 完全使用指南,学不会你打我_第38张图片

准备安卓设备

使用 Android 真机

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

  • 开启 USB 调试

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

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

超详细 React Native 完全使用指南,学不会你打我_第39张图片
  • 通过 USB 数据线连接设备

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

超详细 React Native 完全使用指南,学不会你打我_第40张图片

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

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

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

adb kill-server
adb start-server
adb devices 
超详细 React Native 完全使用指南,学不会你打我_第41张图片

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

超详细 React Native 完全使用指南,学不会你打我_第42张图片

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

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

超详细 React Native 完全使用指南,学不会你打我_第43张图片

解决方法

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

超详细 React Native 完全使用指南,学不会你打我_第44张图片

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

超详细 React Native 完全使用指南,学不会你打我_第45张图片 超详细 React Native 完全使用指南,学不会你打我_第46张图片

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

超详细 React Native 完全使用指南,学不会你打我_第47张图片

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

超详细 React Native 完全使用指南,学不会你打我_第48张图片
  • 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/
超详细 React Native 完全使用指南,学不会你打我_第49张图片

使用 Android 模拟器

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

超详细 React Native 完全使用指南,学不会你打我_第50张图片 超详细 React Native 完全使用指南,学不会你打我_第51张图片

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

超详细 React Native 完全使用指南,学不会你打我_第52张图片

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

超详细 React Native 完全使用指南,学不会你打我_第53张图片 超详细 React Native 完全使用指南,学不会你打我_第54张图片

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

超详细 React Native 完全使用指南,学不会你打我_第55张图片

解决方法

将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即可。

超详细 React Native 完全使用指南,学不会你打我_第56张图片 超详细 React Native 完全使用指南,学不会你打我_第57张图片

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

超详细 React Native 完全使用指南,学不会你打我_第58张图片

到这里真机和模拟器都可以愉快的玩耍了,修改一下 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 安装自动生成代码片段插件,如下图所示:

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

超详细 React Native 完全使用指南,学不会你打我_第59张图片 超详细 React Native 完全使用指南,学不会你打我_第60张图片

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

你可能感兴趣的:(react,native,前端,react.js)