超详细 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 安装与配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15041931/article/details/122024219

智能推荐

如何配置filezilla服务端和客户端_filezilla server for windows (32bit x86)-程序员宅基地

文章浏览阅读7.8k次，点赞3次，收藏9次。如何配置filezilla服务端和客户端百度‘filezilla server’下载最新版。注意点：下载的版本如果是32位的适用xp和win2003，百度首页的是适用于win7或更高的win系统。32和64内容无异。安装过程也是一样的。一、这里的filezilla包括服务端和客户端。我们先来用filezilla server 架设ftp服务端。看步骤。1选择标准版的就可以了。 _filezilla server for windows (32bit x86)

深度学习图像处理01：图像的本质-程序员宅基地

文章浏览阅读724次，点赞18次，收藏8次。深度学习作为一种强大的机器学习技术，已经成为图像处理领域的核心技术之一。通过模拟人脑处理信息的方式，深度学习能够从图像数据中学习到复杂的模式和特征，从而实现从简单的图像分类到复杂的场景理解等多种功能。要充分发挥深度学习在图像处理中的潜力，我们首先需要理解图像的本质。本文旨在深入探讨深度学习图像处理的基础概念，为初学者铺平通往高级理解的道路。我们将从最基础的问题开始：图像是什么？我们如何通过计算机来理解和处理图像？

数据探索阶段——对样本数据集的结构和规律进行分析_数据分析 规律集-程序员宅基地

文章浏览阅读62次。在收集到初步的样本数据之后，接下来该考虑的问题有：（1）样本数据集的数量和质量是否满足模型构建的要求。（2）是否出现从未设想过的数据状态。（3）是否有明显的规律和趋势。（4）各因素之间有什么样的关联性。解决方案：检验数据集的数据质量、绘制图表、计算某些特征量等，对样本数据集的结构和规律进行分析。从数据质量分析和数据特征分析两个角度出发。_数据分析 规律集

上传计算机桌面文件图标不见,关于桌面上图标都不见了这类问题的解决方法-程序员宅基地

文章浏览阅读8.9k次。关于桌面上图标都不见了这类问题的解决方法1、在桌面空白处右击鼠标-->排列图标-->勾选显示桌面图标。2、如果问题还没解决，那么打开任务管理器(同时按“Ctrl+Alt+Del”即可打开)，点击“文件”→“新建任务”，在打开的“创建新任务”对话框中输入“explorer”，单击“确定”按钮后，稍等一下就可以见到桌面图标了。3、问题还没解决，按Windows键+R(或者点开始-->..._上传文件时候怎么找不到桌面图标

LINUX 虚拟网卡tun例子——修改_怎么设置tun的接收缓冲-程序员宅基地

文章浏览阅读1.5k次。参考：http://blog.csdn.net/zahuopuboss/article/details/9259283 #include #include #include #include #include #include #include #include #include #include #include #include _怎么设置tun的接收缓冲

UITextView 评论输入框 高度自适应-程序员宅基地

文章浏览阅读741次。创建一个inputView继承于UIView- (instancetype)initWithFrame:(CGRect)frame{ self = [superinitWithFrame:frame]; if (self) { self.backgroundColor = [UIColorcolorWithRed:0.13gre

随便推点

字符串基础面试题_java字符串相关面试题-程序员宅基地

文章浏览阅读594次。字符串面试题（2022）_java字符串相关面试题

VSCODE 实现远程GUI，显示plt.plot， 设置x11端口转发_vscode远程ssh连接服务器 python 显示plt-程序员宅基地

文章浏览阅读1.4w次，点赞12次，收藏21次。VSCODE 实现远程GUI，显示plt.plot， 设置x11端口转发问题服务器 linux ubuntu16.04本地 windows 10很多小伙伴发现VSCode不能显示figure，只有用自带的jupyter才能勉强个截图、或者转战远程桌面，这对数据分析极为不方便。在命令行键入xeyes（一个显示图像的命令）会failed，而桌面下会出现：但是Xshell能实现X11转发图像，有交互功能，但只能用Xshell输入命令plot，实在不方便。其实VScode有X11转发插件！！方法_vscode远程ssh连接服务器 python 显示plt

Java SE | 网络编程 TCP、UDP协议 Socket套接字的使用_javase套接字socket-程序员宅基地

文章浏览阅读529次。网络编程_javase套接字socket

element-ui switch开关打开和关闭时的文字设置样式-程序员宅基地

文章浏览阅读3.3k次，点赞2次，收藏2次。element switch开关文字显示element中switch开关把on-text 和 off-text 属性改为 active-text 和 inactive-text 属性.怎么把文字描述显示在开关上?下面就是实现方法: 1 <el-table-column label="状态"> 2 <template slot-scope="scope">..._el-switch 不同状态显示不同字

HttpRequestUtil方法get、post、JsonToPost_httprequestutil.httpget-程序员宅基地

文章浏览阅读785次。java后台发起请求使用的工具类package com.cennavi.utils;import org.apache.http.Header;import org.apache.http.HttpResponse;import org.apache.http.HttpStatus;import org.apache.http.client.HttpClient;import org.apache.http.client.methods.HttpPost;import org.apach_httprequestutil.httpget

App-V轻量级应用程序虚拟化之三客户端测试-程序员宅基地

文章浏览阅读137次。在前两节我们部署了App-V Server并且序列化了相应的软件，现在可谓是万事俱备，只欠东风。在这篇博客里面主要介绍一下如何部署客户端并实现应用程序的虚拟化。在这里先简要的说一下应用虚拟化的工作原理吧！App-V Streaming 就是利用templateServer序列化出一个软件运行的虚拟环境，然后上传到app-v Server上，最后客户..._app-v 客户端

推荐文章

热门文章

相关标签