(Friendship tip: RN study, from the beginning of the most basic, you do not want to be too basic, students who know, please skip, hope not to delay the valuable time of the students who have learned)

VS Code is an extension development plug-in that provides a development environment for React Native projects. You can debug code, run React Native commands quickly, and alert people intelligently. Very easy to use.

The installation

First, make sure you have the React Native environment installed and configured.

To install VS Code, go to Github, download the plugin, and install it directly on your computer.

Plug-in address:https://github.com/Microsoft/vscode-react-native

It has the ability to open a folder. Navigate to the React Native project’s root directory and use the folder open function to put the entire project directory in it.

The effect is as follows:


Debugging environment

Installation and Commissioning Environment

  1. Click the VS Code button on the left menu to view the image, then click the Settings button on the top left of Configure to view the image, and select the React Native debug environment. See the picture below

    Tip: You may not find the React Native debug environment selected in your development tools. It doesn’t look like the picture. It’s okay. Look down. I’ll show you the solution.

  2. VS Code generates a launch.json file that contains some of the default configurations for our project. We can modify the contents of the configuration file, for example, we can modify the target property to select the emulator to debug. See the picture below

Start the Debug dialog

To start a debug session, select configuration from the Configuration drop down list, and then click the Start button, gear shaped configuration button (or press F5). Review images

For more information on debugging with VS Code, check out the entire guide:

Address:https://code.visualstudio.com/docs/editor/debugging

Use the React Native command in the command panel

Open the command panel and select the React Native command type. See the picture below

Tip: you may not find the command on the diagram in your development tools. It’s okay. Keep reading, and I’ll tell you what to do.

  1. Run the Android command to trigger the react-native run-Android to start the Android application.

  2. Run the ios command to trigger the react-native run-ios, and you can run ios applications in the emulator.

  3. Using the Packager command, you can enable or disable the React-packager function.

Tips for solutions

React Native Tools is not installed in the development tool. You can search React Native in the React Native extension to find React Native Tools and install it. Figure: View pictures

Use smart reminders

Smart alerts help us find objects, methods, and parameters in React Native. See the picture below

Enabling Smart Reminders

React Native smart alerts rely on VS Code tools to support JSX syntax. To enable this feature, the following prompt will immediately appear when you open the React Native project. This is a one-time prompt, using JSX support. We need to restart VS Code for the change Settings (smart alerts) to take effect.

Tip: The latest version itself supports Salsa smart reminders.

We can verify that Salsa smart reminders have been enabled by checking the Status Bar at the bottom. If so, we have succeeded. Review images

This is what VS Code is all about. If you have any questions or do not understand, we can discuss together.

React Native Configuration For Android

Low low low

Nuggets is a high quality technology community, from RxJava to Android Studio, performance optimization to excellent open source libraries, so that you don’t miss every technical dry product of Android development. Long press the picture qr code to identify or search for “gold digging” in the major application market, the technology is in your grasp.

Review images

Click on theRead the originalFor details.