react-native开发:window下安装与环境配置遇到的问题

大纲

  • 如何安装Java JDK?
  • 如何安装Android SDK?
  • 如何安装react-native?
  • 运行react-遇到的问题,以及解决方法

如何安装react-native?

工具/原料

Android SDK
Nodejs
Java Jdk

步骤:

如何安装Java jdk?

1)从 java jdk官网下载


如何安装Android SDK?

用Android Studio工具安装

或者下载最新的Android SDK 文件,到官网选择自己想要的版本下载
Android SDK文件,里面有两个应用程序: “SDK Manager.exe”(负责下载或更新SDK包) 和 "AVD Manager.exe"(负责创建管理虚拟机)。我们先运行“SDK Manager.exe”进行SDK下载。
如何配置android sdk的环境变量:

1)新建环境变量,ANDROID_HOME:Android SDK Manager的位置

例如我的电脑上面:(ANDROID_HOME=> C:\Users\hsq\AppData\Local\Android\Sdk)

2)设置环境变量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)


如何安装nodejs?

下载地址:https://nodejs.org/en/

下载node.js,找好对应的版本,然后去安装就可以了。
大家可以通过node -v的命令来测试NodeJS是否安装成功

安装react-native命令行工具

译注:由于众所周知的网络原因,react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像,在命令行输入:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist


npm install -g react-native-cli
安装好之后,可以命令行下就有react-native命令了


创建react-native遇到的问题:

react-native run-android

现象:

首次运行需要等待数分钟并从网上下载gradle依赖。(这个过程屏幕上可能出现很多小数点,表示下载进度。这个时间可能耗时很久,也可能会不停报错链接超时、连接中断等等——取决于你的网络状况和墙的不特定阻断。总之要顺利下载,请使用稳定有效的科学上网工具。)

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备

至此,应该能看到APP红屏报错,这是正常的,我们还需要让app能够正确访问pc端的packager服务

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。


报错一:

F:\react-native开发\projects\react-weather-master>react-native run-android
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug...

FAILURE: Build failed with an exception.

* Where:
Build file 'F:\react-native开发\projects\react-weather-master\android\app\build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Your project path contains non-ASCII characters. This will most likely cause the build to fail on Windows. Please move your project to a different directory. See http://b.android.com/95744 for details. This warning can be disabled by using the command line flag -Dcom.android.build.gradle.overridePathCheck=true, or adding the line com.android.build.gradle.overridePathCheck=true' to gradle.properties file in the project directory.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 7.657 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html


分析原因:从上面错误提示,看出是项目目录路径中有中文,导致运行报错

解决方法:将项目复制到一个没有中文的路径文件夹,再进入工程目录,运行react-native run-android


参考资源:

windows 下android react native详细安装配置过程

React Native常见报错


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值