react-native学习----------Android的Windows搭建

序言

           开始研究react-native来弄安卓和IOS ^_^~~~.欢迎骚扰:cuiyaonan2000@163.com

           参考资料地址:https://reactnative.cn/docs/getting-started.html

 

环境搭建

Copy官网的一句话~需要选择正确的版本来运行.

我们建议直接使用搜索引擎搜索下载 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必须大于等于 10,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。

 

Node安装

首先下载该安装包 ,地址为:http://nodejs.cn/download/(下载的文件是node-v12.13.0-x64.msi这个是最新的不能用,需要下载node-v12.8.0-x64.msi替代 此处一定要注意),下载完成后,就高歌猛进.

安装完成后在CMD中运行如下命令. 将源切换成淘宝源

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用 
npx nrm use npm

出现如下的图示,就表示切换源成功了

 

Python--2.7.17安装

首先下载该安装包,地址为:https://www.python.org/downloads/release/python-2717/.然后选择箭头的路径下载,然后高歌猛进

 

JDK 安装

就不说了~~~~~~需要知道的可以骚扰:cuiyaonan2000@163.com

 

Yarn、React Native 的命令行工具(react-native-cli)

直接在CMD中运行下面命令.

关于如何使用:安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

 

Android 开发环境

copy 官网的一句话~~~第一我看到是崩溃的,但是国内已经有社区了~~所以不必担心

如果你之前没有接触过 Android 的开发环境,那么请做好心理准备,这一过程相当繁琐。请万分仔细地阅读下面的说明,严格对照文档进行配置操作。

译注:请注意!!!
国内用户必须必须必须有稳定的翻墙工具,否则在下载、安装、配置过程中会不断遭遇链接超时或断开,
无法进行开发工作。
某些翻墙工具可能只提供浏览器的代理功能,或只针对特定网站代理等等,请自行研究配置或更换其他软件。
总之如果报错中出现有网址,那么 99% 就是无法正常翻墙。

安装 Android Studio

下面的是COPY官网,我是从这里下载的:http://www.android-studio.org/(android-studio-ide-183.5522156-windows.exe) 下载的安装过程和如下官网的什么勾选有出入,但是没关系,先一路高歌猛进.

然后全都安装成功后你会看到 Custom选项的指引了

首先下载和安装 Android Studio,国内用户可能无法打开官方链接,请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项,确保选中了以下几项:

然后点击"Next"来安装选中的组件。

如果选择框是灰的,你也可以先跳过,稍后再来安装这些组件。

安装完成后,看到欢迎界面时,就可以进行下面的操作了。

 

安装 Android SDK(这个我先选择最新的SDK试试,做下小白鼠---事实证明不要实验)

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure",然后就能看到"SDK Manager"。我就默认的最新的Android SDK: Android 9.+(Q) 如下图所示

这个就是项目启动后天幻SKD的路径~~~
SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。
具体路径是Appearance & Behavior → System Settings → Android SDK。

然后继续安装一些东西~~~怎么这么东西要安装.这里因为我现在的的是最新的Android SDK 故此这里没按照指定的标准来弄.先看看效果.后面不行在替换成对应版本.~~~~~~~~~~~~~~~~~~~~~~~~~~~~这么干不行~

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

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

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

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

 

 配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

ANDROID_HOME Environment Variable

 

SDK 默认是安装在下面的目录:

c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径,具体是Appearance & Behavior → System Settings → Android SDK

你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。

 

把 platform-tools 目录添加到环境变量 Path 中

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为:

c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

 

 

创建新项目

 

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目:

react-native init cuiyaonan2000Project

提示:你可以使用--version参数(注意是个杠)创建指定版本的项目。例如react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

Windows 用户请注意,请不要在某些权限敏感的目录例如 System32 目录中 init 项目!会有各种权限限制导致不能运行!

如果你是想把 React Native 集成到现有的原生项目中,则步骤完全不同,请参考集成到现有原生应用

创建完成后,在IDE中选择已存在的项目,就可以进入该项目了.如图

 

 

准备 Android 设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。后面我们所有的文档除非特别说明,并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device(简称 AVD)的模拟器(用这个来模拟测试)。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整,但性能较差。第三方模拟器性能较好,但可能需要付费,或带有广告。

使用 Android 真机

你也可以使用 Android 真机来代替模拟器进行开发,只需用 usb 数据线连接到电脑,然后遵照在设备上运行这篇文档的说明操作即可。

使用 Android 模拟器(肯定用这个了)

你可以使用 Android Studio 打开项目下的"android"目录,然后可以使用"AVD Manager"来查看可用的虚拟设备,它的图标看起来像下面这样:

Android Studio AVD Manager

如果你刚刚才安装 Android Studio,那么可能需要先创建一个虚拟设备。点击"Create Virtual Device...",然后选择所需的设备类型并点击"Next",然后选择Pie API Level 28 image.(这里也很重要一定注意这个28,选错了就不行了,这里很容易选错)

译注:请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。

如果你还没有安装 HAXM(Intel 虚拟硬件加速驱动),则先点击"Install HAXM"或是按这篇文档说明来进行安装。(这个上面已经安装了不需要重新安装)

然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了,启动完后我们可以尝试运行应用。

 

 

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行react-native run-android

cd cuiyaonan2000Project
react-native run-android

如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。

如果你的设备的 Android 版本低于 5.0,则可能在运行时看到红屏,请阅读在设备上运行这篇文档来按照步骤解决。

 

AwesomeProject on Android

react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。(如下的一定要注意,首次运行可能要十分钟下载)

译注:建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。

如果你无法正常运行,遇到奇奇怪怪的红屏错误,先回头仔细对照文档检查,然后可以看看论坛的求助专区。不同时期不同版本可能会碰到不同的问题,我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令,那样会导致代码完全无法刷新。

 

 

修改项目

现在你已经成功运行了项目,我们可以开始尝试动手改一改了:

  • 使用你喜欢的文本编辑器打开App.js并随便改上几行
  • 按两下 R 键,或是在开发者菜单中选择 Reload JS,就可以看到你的最新修改。(这个就是指在app的应用上点击两下R键,这个Reload JS的点击地方如下图所示)

 

 

一些坑(解决如下问题就可以启动了)

  1. 关于启动首先肯定是可以用 react-native run-android 来启动的,这个命令会包含命令 react-native命令.该命令就是启动服务~~~~
  2. 其次就是启动的anchroid的模拟器默认是没有启动 开发者模式的.所以必须开启开发者模式否则你就绕圈吧(选择设置,然后不停点击版本号.直到弹出框的数字变成0.如果你不会可以骚扰cuiyaonan2000@163.com)
  3. 另外可以访问2个地址以确定项目是否启动成功A:http://localhost:8081/index.bundle?platform=android  B:http://localhost:8081/debugger-ui/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cuiyaonan2000

给包烟抽吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值