directory

  • Set up mining pit in ios environment
  • Android environment set up mining pit
  • Use of the React-Native base components
  • Integration of ANTD-mobile-RN component libraries
  • React-native uses a library of font ICONS
  • How does React-Native do the startup screen and welcome page
  • [email protected] Use of navigation components

preface

In this article, we will introduce the experience of installing React-Native 0.63 in the Android environment under Windows 10.

Build Node and JDK

The Node installation

NodeJs is easy to install on windows10. Go to the NodeJs website to download the Installer of the current stable version and install it step by step.

Note that the version of Node should be greater than or equal to 12. After installing Node, it is recommended to set NPM image (Taobao source). Please refer to this article for detailed steps. CNPM installed module path is strange, packager can not correctly identify!

The JDK installation

The React-Native JDK version must be 1.8 (1.9 or later is not supported). JDK1.8 download address

The installation of JDK1.8 is relatively simple and follows the next step of the executable.

After installing JDK, you also need to configure JDK, configure JDK on windows10 can see this article in detail

Android Development Environment

Install the Android Studio

Download Android Studio and install it from the official website. After the installation, you need to install the corresponding SDK and other operations. When installing THE SDK, you need to climb the wall software or VPN that can connect to foreign websites. Otherwise, you will be very depressed.

Install the Android SDK

Android Studio installs the latest version of the Android SDK by default. Currently, building React Native requires an Android 10 (Q) SDK (note that the SDK version is not the same as the terminal version, RN currently supports Android 4.1 and above). You can choose to install each version of the SDK in Android Studio’s SDK Manager. You can find SDK Manager on Android Studio’s welcome screen. Click “Configure” and you’ll see “SDK Manager”.

The SDK Manager can also be found in the “Preferences” menu of Android Studio. The specific path is Appearance & Behavior → System Settings → Android SDK.

  • In SDK Manager, select the **”SDK Platforms”** TAB, then check “Show Package Details” in the lower right corner. Expand the Android 10 (Q) options and make sure the following components are checked:

    • Android SDK Platform 29
    • Intel x86 Atom_64 System Image

  • Then click on the “SDK Tools” TAB, again in the lower right corner of the check box “Show Package Details”. Expand the “Android SDK build-tools “option and make sure the 29.0.2 version required for React Native is selected. You can install multiple other versions at the same time.

Finally, click “Apply” to download and install these components.

Configure the ANDROID_HOME environment variable

React Native requires environment variables to know what path your Android SDK is installed on so it can compile properly.

Open control Panel – System and Security – System – Advanced System Settings – Advanced – Environment Variables – New and create an environment variable named ANDROID_HOME (system or user variable) pointing to the directory where your Android SDK is located. You can view the actual path to the SDK from the “Preferences” menu in Android Studio: Appearance & Behavior → System Settings → Android SDK.

Add some tool directories to the environment variable Path

Open control Panel -> System and Security -> System -> Advanced System Settings -> Advanced -> Environment Variables, select Path variable and click Edit. Click New and add the tools directory paths: platform-tools, emulator, tools, tools/bin

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\emulator
%ANDROID_HOME%\tools
%ANDROID_HOME%\tools\bin
Copy the code

If you have successfully completed all the above steps, you have successfully completed the installation of Node, JDK, Android Studio and andord SDK. Let’s run this with a simple example.

Create the React Native project

Since the latest version of React Native is 0.63 and the nodejs and NPM versions are close to the latest, execute the following command to create a project.

npx react-native init AwesomeProject
Copy the code

This process may take a little longer. This has a lot to do with the current network

Tip: You can use the –version argument (note the two bars) to create a project of the specified version. Example: NPX react-native init MyApp –version 0.44.3. Note that the version number must be accurate to two decimal points.

Ready to run and debug

Running react-Native for Android is similar to running ios, except that xcode for ios provides a great emulator with excellent performance and performance. Android is a bit shabby at this point. The emulator that comes with Android Studio, though free, is very poor in performance and a huge drain on resources. Android Studio’s built-in emulator is not recommended unless the computer has excellent performance.

So what device should I use to run the Android project? The answer is either a real machine or a third-party emulator.

Real machine operation

React-native provides a great tutorial for you to learn how to run the project on a real Android phone.

Android Studio emulator runs

You can use Android Studio to open the “Android” directory under your project, and then use the “AVD Manager” to view available virtual devices. If you have just installed Android Studio, you may need to create a virtual appliance first. Click “Create Virtual Device…” , then select the desired device type and click “Next”, then select Q API Level 29 Image.

Please do not click on Android Studio’s suggestion to update a dependency in the project, otherwise it may not work.

If you have not already installed HAXM (Intel Virtual Hardware Acceleration Driver), click “Install HAXM” or follow this documentation to Install it.

Then click “Next” and “Finish” to complete the virtual appliance creation. You should now be able to click the green triangle button next to the virtual device to launch it, and once it’s up we can try running the app.

Run the project

There is a key pit that needs to be mentioned here, but this pit is definitely for corporate networks with network proxies or VPNS. The usual running code is as follows:

yarn android 
Copy the code

That’s the command to run Android.

When you run the above code for the first time, Android downloads Gradle and gradle files. Gradle is built based on Maven. Because the network of the company uses VPN, the following error occurred during the project build:

PKIX path building failed
Copy the code

The address of maven dependency package cannot pass Java SSL authentication since build download. So the Internet to find a lot of methods and posts on how to solve this problem.

  1. You can add a trust certificate by downloading the certificate from the website and importing it using keytool.
  2. Configure Android Studio to skip the SSL authentication method.

None of the above methods works. Just when I was about to give up, I turned off the company VPN and tried again. Yarn Android actually worked. So in summary, the network environment will cause gradle to build.

If you want gradle to build faster, you can modify the build.gradle file of your project to include all the files in the build.gradle file

Google jCenter () () / / are respectively replace maven {url 'https://maven.aliyun.com/repository/google'} maven {url 'https://maven.aliyun.com/repository/jcenter' }Copy the code

The react-Native page can be seen in the simulator.