Ultra-detailed configuration ReactNativeh environment - learning enough of this configuration RN

The following is directed to Window System platform

The first stage

Description : Node version must be higher than 8.3, Python must be version 2.x (not supported 3.x), and must JDK version 1.8 (currently does not support 1.9 and later). After installing the Node npm recommendations provided behind the mirror to accelerate the process (or the Internet using scientific tool); from https://reactnative.cn/docs/getting-started.html

1. Install python2.x (note the version 2.X, is not the version 3.x). For installation and basic understanding of python, you can refer to this: https://blog.csdn.net/u012475786/article/details/88369958

2. Install nodejs latest version and install it directly to the next step;

3. Installation CNPM (internal mirror package manager, to avoid latency problems npm package download network) through a global command npm install -g cnpm; global command CNPM then mounted react-native-cli (scaffolding tools) and the yarn package manager ; cmd command is as follows:

  1. -g install altitude above sea level
  2. cnpm install -g react-native-cli yarn

yarn from Facebook Inc., for replacement or cnpm npm, to accelerate download and install third-party reliance, recommended that priority use yarn, in ReactNative project using npm or cnpm download, download package will encounter some errors or incomplete; yarn basic command summary:

  1. Installation package.json dependent on: yarn install
  2. Global installation packages: yarn global add xxx (package name)
  3. Installation Package: yarn add xxx is equivalent to the yarn -D add xxx
  4. Remove packages: yarn remove xxx
  5. View the list of packages: yarn list
  1. JDK download and install and configure the environment refer to the following links: http://baijiahao.baidu.com/s?id=1599433496793814200&wfr=spider&for=pc

Summary: Python2.x (version can Python3 below), JDK1.8 version installed, nodejs8.3 above (npm can use the command line command cmd after installation nodeJS, and are mounted cnpm, react-native-cli and yarn).

second stage

1. Prepare an Android phone, you can also use the Android virtual machine. However, due to the virtual machine memory accounted for a large, easy to make computer become Caton. Resulting in the development of accurate, real machine testing is recommended.

2. Connect the USB real machine to a computer, and open the "Developer mode" in the phone settings, select "USB Debugging."

3. Download and install the Android SDK software tool kit, download the following address: https://www.androiddevtools.cn/
Here Insert Picture Description

The AndroidSDK downloaded archive into a directory, attention to the need to remember the extracted directory location. Not recommended on the C drive, if used Android virtual machine, AndroidSDK catalog will become very large. Next, with reference to the following directory location AndroSDK introduction. (With a real test, so on the C drive)

C:\android-sdk_r24.4.1\android-sdk-windows\

  • Arranged in the system environment variable variable name ANDROID_HOME, the directory path is AndroidSDK; as shown below:
    Here Insert Picture Description
  • Variables variable named Path add the following configuration values, each path must be noted that ";" apart;

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools\bin;

The configuration shown in FIG:
Here Insert Picture Description
Description: In the above configuration, the main cmd command line and globally accessible android sdkmanager command, as shown:
Here Insert Picture Description

说明:Android SDK是针对安卓开发使用的开发工具包,用于为特定的软件包、软件框架、硬件平台、操作系统等建立应用软件的开发工具的集合。它提供了Android API库和开发工具构建,调试安卓应用等功能。总而言之,它是支持开发和运行安卓应用的一个软件平台。

  1. 配置Android SDK
    在安装目录下点击SDK Manager.exe文件,会出现如下图所示页面,然后安装相应的工具包。注意必须安装SDK tools,platform-tools和build-tools这3个工具包;
    Here Insert Picture Description

sdk tools:包含了很多重要工具:.9patch工具,monkeyrunner压力测试工具,性能追踪可视化工具traceview;还有Android系统api,针对不同的系统api,对接口和性能做了调整,这也是Android SDK的核心。

platform-tools:包含了很多重要工具:adb安卓调试工具(以命令行的形式和虚拟机或者真机进行通讯);sqlite3工具(可以查询移动数据库信息)等其它工具。同上,其他工具可以参考Google的开发者文档了解。

build-tools:aapt工具,aidl工具和打包工具(apkbuilder,dex工具)

  1. 使用命令react-native init rndemo初始化ReactNative项目。初始化成功后进入该目录使用react-native run-android命令启动项目,第一次启动会比较慢,因为需要下载Gradle构建工具。由于外网原因,可能导致下载失败项目运行失败。多试几次,如果还不行,根据启动项目提示的Gradle版本,去下载相应版本的Gradle工具压缩包(注意版本),下载链接:http://services.gradle.org/distributions/,
    我需要的gradle-4.10.2-all.zip,如下图所示
    Here Insert Picture Description
    下载gradle压缩包成功后,打开如下目录(目录路径各有不同),然后解压文件,示例如下图所示:
    Here Insert Picture Description
    再重新使用react-native run-android命令重新启动命令,稍等几分钟,一般来说就会启动成功,你连接的手机就会出现相应的ReactNative启动界面;

启动失败问题总结:

  1. 根据报错看看手机有没有正常连接到电脑;(一般会提示设备找不到)
  2. AndroidSDK系统变量有没有正常配置,通过命令行输入android能不能正常输出;
  3. sdk tools、platform-tools、build-tools有没有正常安装(这3个必须安装);
  4. Gradle构建工具有没有正常下载并解压到相应的目录;
  5. 第一次启动有可能会出现如下所示报错,一般来说是SDK没有被授权,在命令行使用sdkmanager --licenses命令进行授权,如果有报错 Error: Unknown argument --licenses,那么先使用sdkmanager --update命令更新SDK,然后在使用sdkmanager --licenses命令。
info Starting JS server...
info Building and installing the app on the device (cd android && ./gradlew app:installDebug)...

> Configure project :app
Checking the license for package Android SDK Build-Tools 28.0.3 in /usr/local/Caskroom/android-platform-tools/28.0.1/licenses
Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
Checking the license for package Android SDK Platform 28 in /usr/local/Caskroom/android-platform-tools/28.0.1/licenses
Warning: License for package Android SDK Platform 28 not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
     platforms;android-28 Android SDK Platform 28
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

  Using Android SDK: /usr/local/Caskroom/android-platform-tools/28.0.1

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

* Get more help at https://help.gradle.org

BUILD FAILED in 0s
error 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

Note : usually installed directly Android Stuio editor to develop ReactNative projects, lack a deep understanding of the configuration, specially from zero-configuration Rect Native environment and record configuration problems encountered in the process, if you encounter other problems, welcome to do a summary prevent future generations stepped pit;

Guess you like

Origin blog.csdn.net/u012475786/article/details/89292547