preface

I’m Xu Zhu. Today, I’m going to share with you how I built React Native cross-end development environment and used VSCode to write silky code. Writing silky code will follow in the next post, which will include practical lessons learned from projects such as directory architecture, functional programming, React Hook, common scenarios, development and debugging, release and deployment, pothole, performance optimization, and more.

Before, I received a group member @me in my technical group and asked if I could provide a tutorial on how to build a development environment for Nanny React Native. I said I could follow the steps in the official document. Unfortunately, things didn’t go smoothly. The process was tedious and not clear enough. The version was updated too fast.

Recently, our team has a new project involving application development tasks of various terminals (such as PC terminal, mobile terminal, tablet terminal and H5 terminal). In terms of technology selection, we had a fierce discussion inside the front end (the main front end framework of the previous project was vue.js), and finally decided to develop all the projects based on the React framework.

There’s no denying the benefits of following the front end and trying out new technologies. To deepen their own impression, skills to a higher level, the combination of actual combat and theory, but also to help more novice fight strange together, to Team members to master a more front-end technology, not alone, we are a Team. 💪

Why React Native

  • Endorsement technology has matured for big companies
  • There are many active developers in the community
  • React is easy to use and efficient to develop
  • Cross-platform compatibility
  • Close to native apps
  • Desciption refresh
  • Saving company costs
  • Learn once, write anywhere

Introduce the React Native

React Native (RN for short) is a cross-platform mobile application development framework that Facebook opened source in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. It supports iOS and Android platforms. RN uses the Javascript language, HTML-like JSX, and CSS to develop mobile applications, so technicians familiar with Web front-end development can enter mobile application development with minimal learning.

For reference only

Best practices perfect stack: React + RN + ES6 + Flex + Hook + Function Component + Axios

Front knowledge

  • HTML + CSS + JS (Basic)
  • React V17.0.2 (Base)
  • React Hook
  • RN v0.66
  • Flex layout
  • ES6/7/8
  • Ajax (Axios)
  • The Node v14.0.0 +
  • Android Studio
  • Chinese version of official documents (React1 & React Native2)

Environment set up

  • Operating system: Win10 professional edition
  • Mobile phone: one android phone & one Nighthian simulator
  • Dependencies must be installed: Node, Yarn, JDK, Android Studio (Android SDK), Python2,Xcode (Mac)

The Node installation

Download the Node version from the official website. However, you are advised to use the NVM tool to install and switch the Node version.

NVM official website download address3

My Node version is V14.0.0, and the official version must be over 12. Install Node as an administrator and press Next to finish.

Yarn installation

// Install YARN globally using NPM
npm install yarn -g

// Check whether the version is successfully installed
yarn -v
Copy the code

Configure the environment variables as shown in the following figure:

Python2 installation and configuration

On Windows 10, run the following command to install PYTHon2.7 as an administrator:

npm install --global --production windows-build-tools
Copy the code

My computer -> Properties -> Advanced System Settings -> Environment Variables -> New System Variables -> Path Path to create an environment variable, as shown below:

// Verify that the configuration is successful
python -V
Copy the code

JDK installation and configuration

JDK download and installation

JDK 1.8官网下载 address4

You can select the corresponding version according to your own computer operating system and download it locally, as shown below:

JDK environment variable configuration

My computer -> Properties -> Advanced System Settings -> Environment Variables -> New System Variables -> Path Path to create an environment variable, as shown below:

// Verify that the configuration is successful
java or java -version or javac
Copy the code

Android Studio download and install

You do not need to download and install the Android SDK dependencies separately. Instead, you will install the latest Android SDK by default by installing the Android Studio development tools. Currently, the React Native app 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.

Download the Android Studio development tool 5 from the official website

Don’t worry if you’ve never worked with an Android development environment before, just follow the steps I’ve outlined and you’ll soon be up and running.

Click download to local, double-click the installation package after downloading, and follow the prompts to complete the next step, as shown below:

If you see the screen above, the installation is successful. Click Finish to complete.

The Android SDK installed

The SDK Manager can be found in the “Preferences” menu of Android Studio. The path is Appearance & Behavior -> System Settings -> Android SDK. As shown below:

The SDK Manager can also be found in the “Tools” menu of Android Studio. As shown below:

Select the “SDK Platforms” TAB in SDK Manager, then check “Show Package Details” in the lower right corner. Expand the Android 10 (Q) option and make sure the following components are checked (again, you must use a stable agent, otherwise you may not see the screen) :

  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image (official emulator Image file, use unofficial emulators do not need to install this component)

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.

Next, click “NDK (Side by Side)” again from the “SDK Tools” TAB, again check “Show Package Details” in the lower right corner, select version 20.1.5948944 to install.

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

The Android SDK configures environment variables

As shown below:

Initialize the project

npx react-native init MyApp
Copy the code

Take a look at the project directory structure downloaded locally, as shown below:

Let’s try opening the Android Studio tool, click the Open button, and select the project to import, as shown below:

The following screen shows that the project is successfully imported, as shown below:

Ouch, mama 😮, how to return a responsibility, grow different, this is to want me to develop Android native rhythm. In a flurry of confusion, I shut down Android Studio. Don’t worry, it doesn’t matter if you turn it off. Just restart the tool. Let’s talk about how to write silky code in the VSCode editor tool.

VSCode builds React Native

Install React Native Tools

Search react in the Plugin market to find react Native Tools to install, as shown below:

Import the previously created project into VSCode as shown below:

After installing the React Native plugin, press F1 to see that the React Native command has a number of options, as shown below:

The initial project needs to add configuration. Click Run -> Add Configuration -> React Native on the menu bar, as shown below:

Finally, the lanuch.json file will add the following code, as shown below:

Pressing the F5 shortcut to run React Native will prompt an error. You don’t have an Android device available yet. The device can be a real or emulator. As shown below:

Compile and run the React Native project directly on the terminal using the following command:

cd MyApp
yarn android
or
yarn react-native run-android
Copy the code

The screenshot of the error is as follows:

Preparing for Android devices

Use Android real phone

We can use the Android real machine to replace the simulator for development, which is very convenient to complete the development and test at one time. We only need to connect the USB cable to my computer, and the specific operation steps are as follows.

  • Enabling USB Debugging

First you need to enable USB debugging to install the development version of the APP freely. Different mobile phones open different ways, please check online.

Mobile Phone Settings -> System and Updates -> Developer Options -> Enable USB debugging, as shown below:

  • Connect the device through a USB cable

To check whether your device is properly connected to ADB (Android Debug Bridge), use the ADB Devices command as shown in the figure below:

If device Unauthorized is displayed after the ANDROID device IS connected to ADB, the solution is as follows:

Turn on the phone, go to developer options, find and click Undo USB Debug mode.

Finally, reconnect the phone to the computer and enter the following commands in sequence:

adb kill-server
adb start-server
adb devices
Copy the code

When you see the authorization dialog box pop up, click OK or allow button. Adb authorization is successful when we see the following figure.

The red box shows that my device is properly connected. Note that you only need to connect one device at a time. If you connect multiple devices (including emulators), some subsequent operations may fail. Unplug unwanted devices or turn off the emulator to ensure that only one of the adb Devices outputs is connected.

Record that the Android real machine debugging cannot be installed and the display signature is inconsistent, as shown in the picture below:

The solution

Find the directory path: Android -> app -> build.gradle Modify the default configuration file as shown below:

After the modification, re-run the command yarn Android, and the following screen appears, indicating that the modification is successful. Click continue to install, as shown in the figure:

View the effect picture of the real machine interface display:

Shake the phone, the debug menu mode will pop up, as shown below:

  • Reload

The refresh function takes effect only when the page is refreshed and JS files are modified. For example, new files or native code modifications need to be recompiled to take effect.

  • Change Bundle Location

Change the URL address after packaging

  • Show Element Inspector

Whether to display the element inspector, view the location, style, hierarchy, box model information of the currently selected element, so that we can quickly locate the problem.

  • Disable Fast Refresh

Disable quick refresh

  • Show Perf Monitor

Whether to display monitoring window, real-time display of memory usage, UI and JS FPS information, to help us debug performance problems.

  • Settings

Performance debugging Settings

  • Enable Sampling Profiler

Whether to enable sampling analyzer

  • Debug

To enable remote debugging, you can use Chrome Developer Tools to debug programs. After selected will open the url to http://localhost:8081/debugger-ui/

Using the Android Emulator

You can use Android Studio to open the “Android” directory under your project, and then use the “AVD Manager” to view the available virtual devices, as shown below:

If you have just installed Android Studio, you may need to create a virtual appliance 6 first. Click “Create Virtual Device…” , then select the desired device type and click “Next”, then select Q API Level 29 Image.

For those unfamiliar with Android Studio tools, it is a time-consuming and laborious task. Therefore, it is recommended that you choose to use a Nether simulator to develop and debug React Native. Download and install the simulator directly from the official website.

When VSCode terminal runs ADB Devices command, it can not connect to the Simulator because adb version does not match, as shown in the figure:

The solution

Copy adb. Exe from D:\Android\Sdk\platform-tools to nox_adb.exe and adb.

Exe connect 127.0.0.1:62001 if VSCode No Device cannot be found after executing adb Devices name again, configure the environment variables and run nox_adb.exe connect 127.0.0.1:62001.

After the connection is successful, run the yarn Android command, and the following screen appears, indicating that the development environment is set up and OK, as shown below:

Here the real machine and the simulator can be happy to play, modify the JS file content, you can see the effect of the modification in time. Perfect

Projection tool for mobile phone screen

Recommend a good Android phone screen casting artifact SCRCPy, interested can try.

  • Linux: apt install scrcpy
  • Windows: Download from 8
  • macOS: brew install scrcpy

Scrcpy is a way to use ADB debugging to throw your phone’s screen onto your computer and control your Android device from your computer. It can be connected via USB or Wifi (similar to an airdrop screen), and doesn’t require any root permissions or programs to be installed on the phone. Scrcpy works on GNU/Linux, Windows, and MacOS.

For details, please go to 👉 SCRCPY Tutorial 9

VSCode plug-in

Install the react auto-generated code snippet plug-in, as shown below:

Type rnfes and press Enter to generate the React Native code snippet, as shown below:

The relevant data

    1. React Official documentation: zh-hans.reactjs.org/
    1. React Native Official documentation: www.react-native.cn/
    1. NVM official website download: github.com/coreybutler…
    1. JDK 1.8 download website: www.oracle.com/java/techno…
    1. Download the Android Studio tools: developer. The Android. Google. Cn/Studio /
    1. Android virtual device guide: developer.android.com/studio/run/…
    1. Download the Nighthian simulator at www.yeshen.com/
    1. Windows 10 mobile Screen Projector download: github.com/Genymobile/…
    1. Detailed tutorial: scrcpy blog.csdn.net/was172/arti…

conclusion

Tianhe blockchain is in urgent need of talents. If you want to join us, please contact me on wechat. In addition, if you want to join the high quality front-end communication group, or you have anything else you want to communicate with me, you can also add my personal wechat LazyCode520.

If there are any mistakes, feel free to leave them in the comments section. If this article has helped you, feel free to like, read and follow. Your likes, views and concerns are the biggest support for me! 🤞

It is not easy to create. Every “like”, “look” and “share” you give me is the biggest support! ❤ ️