This is the 29th day of my participation in the Genwen Challenge in August

Configuring environment Variables

Sometimes we need to perform some execution, but the instruction files are only in specific directories. If these directories are configured in environment variables, the instruction files in these directories can be accessed anywhere in the system, so that we can use the instructions directly

Open environment variable configuration

Computer => Properties => Advanced System Settings

Environment variable manipulation

New: Create a new environment variable

Edit: Modify the original environment variable

There are two classes of commutator variables

System environment variables: Can be used by any user

User environment variables: only available for that user.

Java environment variables

Create the JAVA_HOME environment variable

Variable name: JAVA_HOME

Variable value: Java installation directory: C:\Program Files (x86)\Java\jdk1.8.0_144

Modify the PATH environment variable

Adding the bin directory

C: Program Files (x86)\Java\jdk1.8.0_144\bin

The second kind of % JAVA_HOME % \ bin

Add the jre\bin directory

C: Program Files (x86)\Java\jdk1.8.0_144\jre\bin

The second % JAVA_HOME % \ jre \ bin

Note: Make sure to copy the original path before modifying it

Android Environment variables

Create the ANDROID_HOME environment variable

Variable name: ANDROID_HOME

A variable’s value:

If the second installation method is C:\Program Files (x86)\Android\ Android-SDK

If it is the third installation method, it is the unzip directory D :\ Android-SDK

Modify the PATH environment variable

Adding the Tools directory

C: Program Files (x86)\Android\ Android-sdk \tools

The second ANDROID_HOME % % \ tools

Add the platform-tools directory

C: Program Files (x86)\Android\ Android-sdk \platform-tools

The second % ANDROID_HOME % \ platform – the tools

Note: Make sure to copy the original path before modifying it

test

Be sure to restart CMD before testing

Test the javas

javac -version

Test the android

Android Open the Android ADK management tool

Adb Devices view linked mobile devices

Run the project

First, use data cable to connect mobile phone and computer

The phone is in developer mode

Installing a VM

To install virtual box

Provides a VIRTUAL machine running environment

Click Setup to proceed to the next step

Install genymotion

Click Setup to proceed to the next step

Let’s open up virtual Box first, then GenyMotion.

Registered account

Go to the website and register an account

The login

Download the equipment

Click the Add Device button to select a device

To download the device, go to C:\Users\think\AppData\Local\Genymobile\Genymotion\ova

We can put the OVA files that we give you in a directory,

We can also enter virtual Box software, click Manage => Import virtual computer => select OVA file, click Next to import device

Configure the SDK

Go to the Settings page, click adb, and select the Android SDK installation directory

Start the project

Type ADB Devices to see if there are linked devices

If we can find the device, we can type React-native run-Android to start the project

At this point we can see the welcome page in the virtual device

react-native run-android
Copy the code

Vm Debugging

Reload means to reload the page

Disabled | enabled hot reloading is close or open the thermal load

Debug view structure

We can install DevTools to debug the page view structure

npm install -g react-devtools

With react-devTools available, you can open the debug screen

Emulates the Chrome debugger, but does not output information

Print log

React-native has a built-in log command that allows you to view data during debugging

The android: react – native log – android

ios: react-native log-ios

Note: Run in the project directory

react-native log-android
Copy the code

Component development

The core of RN is React, so the syntax for defining the virtual DOM and components is the same

For example, define the virtual DOM:

Note: Native is not a browser environment, so there are no Web side DOM elements, but RN can emulate these DOM elements through components such as

The View simulation div

The Text simulation span

These components are provided by RN, so use of these components is imported through RN

The syntax for defining components is the same as the syntax for defining components on the Web side.

Extends Component {}

Extends Component<{}> {}

<{}> This is a generic type in TS syntax.

Everything else is the same

RN also develops projects using the ES Module specification

Two-way data binding

On the Web side, we define the input field with input

In RN, we define the input field with the TextInput component

They are very similar, for example, they can both define the suggested text via placeholder

In the input element, content changes are listened for through the onChange event, which is the event object

In the TextInput component, changes in content are listened for through the onChangeText event, and the argument is content.