一、React Native概述
React是一个构建用户界面的JS框架，实现了数据的响应式和组件化开发，本身既可以用于Web网站项目，也可以用于创建移动端App项目。
相较于Vue.js在移动端只能构建WebApp，React生态系统中有一个可以构建“真正原生App”的扩展 —— React Native，可以这样说：“React Native是React生态圈可以傲视其它对手的绝对功臣”。
原理：React Native应用中的JS代码，在开发运行阶段会被编译为原生的Java或OC代码
React Native英文官网：https://reactnative.dev/
React Native中文网：https://·/
二、React Native开发/运行环境搭建开发平台：Windows
目标平台：Android
1.安装依赖必须安装的依赖有：Node、JDK 和 Android Studio。
1.1安装Nodejs（版本大于V14）下载地址：https://nodejs.org/en/download/
查看版本：node -v
1.2安装JDK（版本大于V11）下载地址：https://·/studio/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qNwN3sa-1658146751562)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192033098.png)]
安装步骤：
1.打开下载好的安装包
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ahIY2BF-1658146751564)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192707905.png)]
2.点击Next
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DkeftaOW-1658146751565)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192742461.png)]
3.修改安装路径，默认也可，然后Next
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OXq3Jiz1-1658146751566)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718192901257.png)]
4.正在安装，完成后点击Next下一步后点击Finish
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuVf5LPx-1658146751567)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193025017.png)]
5.完成后运行界面，点击Next
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-55HUwgpg-1658146751569)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193317287.png)]
6.安装界面中选择"Custom"选项
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k2KtVZlR-1658146751569)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718193804433.png)]
7.勾选同意(Accept)所有的使用条款即可。接下来开始下载将近400MB的资料…[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XPgdhRqS-1658146751570)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194236626.png)]
7.内存的选择，根据情况选择就好，最好不要低于2G（2048MB）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D0AYtljU-1658146751571)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194454028.png)]
8.然后就是next-finish完成下一步就好，在 SDK Manager 中选择"SDK Platforms"选项卡，
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TQbzgT2x-1658146751572)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718194752865.png)]
然后在右下角勾选"Show Package Details"。展开Android 11 ?选项，确保勾选了下面这些组件：
- Android SDK Platform 30
- Intel x86 Atom_64 System Image
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-igP44zmK-1658146751574)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195416210.png)]
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的30.0.2版本。你可以同时安装多个其他版本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kKS335xf-1658146751575)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195642508.png)]
然后还是在"SDK Tools"选项卡，点击"NDK (Side by side)“，同样勾中右下角的"Show Package Details”，选择20.1.5948944版本进行安装。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-29Nl7PtH-1658146751576)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718195735826.png)]
最后点击"Apply"来下载和安装这些组件。
2.配置ANDROID_SDK环境变量WIN7：计算机→属性→高级系统设置→高级→环境变量; WIN10：此电脑→高级系统设置→环境变量。
或者直接搜索环境变量打开。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtqVOhCX-1658146751577)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200318195.png)]
1.新建，创建一个名为ANDROID_SDK的环境变量，变量值需要填写自己安装的路径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CI2wtXcn-1658146751577)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200649288.png)]
2.修改系统环境变量Path，编辑path环境变量，添加一个%ANDROID_SDK%；
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4E500STZ-1658146751578)(E:\WEBTN2202\知识库\前端知识\前端开发环境搭建\ReactNative环境搭建.assets\image-20220718200947526.png)]
点击确定，确定，确定。所有的确定都要点才会保存好配置。然后重启Android Studio。
系统环境变量Path，编辑path环境变量，添加一个%ANDROID_SDK%；
[外链图片转存中…(img-4E500STZ-1658146751578)]
点击确定，确定，确定。所有的确定都要点才会保存好配置。然后重启Android Studio。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
