React-native-开篇

开发平台:Windows
目标平台:Android
安装依赖:Node、Python2、JDK(1.8及以上)和 Android Studio。node、python、jdk可去官网下载
1.Yarn
Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
npm install -g yarn
安装完 yarn 之后就可以用 yarn 代替 npm 了,例如用yarn代替npm install命令,用yarn add 某第三方库名代替npm install 某第三方库名。
2.安装 Android Studio https://developer.android.com/studio/index.html
完成后选择SDK manager进行安装 Android SDK
3. 配置 ANDROID_HOME 环境变量 --指定sdk文件所在位置
在这里插入图片描述
4.编辑系统变量path—新增如下
在这里插入图片描述
5.cmd分别运行adb,android
未报错说明已成功
6、创建新项目
如果你之前全局安装过旧的react-native-cli命令行工具,请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。
使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装,可以直接用 node 自带的npx命令来使用(注意 init 命令默认会创建最新的版本):
必须要看的注意事项一:0.45 及以上版本需要依赖 boost 等几个很难下载成功的第三方库编译,请务必使用稳定的代理软件。
必须要看的注意事项二:0.60 及以上版本依赖 CocoaPods 安装。CocoaPods 的仓库在国内也很难访问。如果在 CocoaPods 的安装步骤卡很久,可以试一下这个国内镜像
必须要看的注意事项三:请不要单独使用常见的关键字作为项目名(如 class, native, new, package 等等)。请不要使用与核心模块同名的项目名(如 react, react-native 等)。请不要在目录、文件名中使用中文、空格等特殊符号。
npx react-native init AwesomeProject
提示:你可以使用–version参数(注意是两个杠)创建指定版本的项目。例如npx react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。
7、安装夜神模拟器–百度搜索官网下载即可
8、编译并运行 React Native 应用
确保你先运行了模拟器或者连接了真机,然后在你的项目目录中运行yarn android或者yarn react-native run-android:
cd AwesomeProject
yarn android

或者

yarn react-native run-android
如果配置没有问题,你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖,耗时可能数十分钟。此过程严重依赖稳定的翻墙工具,否则将频繁遭遇链接超时和断开,导致无法运行。
也可以尝试阿里云提供的maven 镜像,将android/build.gradle中的jcenter()和google()分别替换为maven { url ‘https://maven.aliyun.com/repository/jcenter’ }和maven { url ‘https://maven.aliyun.com/repository/google’ }(注意有多处需要替换)。
如果你的设备的 Android 版本低于 5.0,则可能在运行时看到红屏,请阅读在设备上运行这篇文档来按照步骤解决。
AwesomeProject on Android
yarn react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。
译注:建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议,否则可能导致无法运行。
如果你无法正常运行,遇到奇奇怪怪的红屏错误,先回头仔细对照文档检查,然后可以看看问题讨论区。不同时期不同版本可能会碰到不同的问题,我们会在论坛中及时解答更新。但请注意千万不要执行 bundle 命令,那样会导致代码完全无法刷新。
用andriod studio打开项目下的andriod文件如下图,这个过程比较慢,目前图中35分钟也没跑完
在这里插入图片描述
Android Studio开发工具内部使用Gradle来构建Android应用,如果下载的Android项目使用的Gradle版本Android Studio还未安装,第一次打开项目时Android Studio就会去下载Gradle,这也就导致项目打开进度相当缓慢。
此时点击Window+E打开资源管理器,找到项目的路径,进入项目的根路径下,找到gradle/wrapper目录
在这里插入图片描述
使用记事本程序打开gradle-wrapper.properties文件,找到最后一行的distributionUrl,此时就能够看到该项目使用的gradle版本
在这里插入图片描述
打开gradle的官方下载链接,找到对应的gradle版本并且下载到本地磁盘上https://services.gradle.org/distributions/

连接夜神模拟器命令行输入 adb connect 127.0.0.1:62001
检验连接模拟器命令 adb devices
在这里插入图片描述
启动SDK命令如下图:
在这里插入图片描述
在这里插入图片描述
配置你的IP端口号,
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值