In this article, we introduce the principles and processes of installing, developing, debugging, packaging, and releasing the React Native environment

Introduction to the

Taro is an open source project based on FacebookReact NativeX will no longer lock React Native. Users will be able to install React Native >=0.60 in their own projects. For React Native 0.59, compatibility will be determined after further investigation. The overall design drawing is as follows:Its general process:

  1. @taro/cliThrough theregisterPlatformregisteredrnPlatform;
  2. yarn dev:rnGet the compile configuration, convertbabel.config.js 及 metro.config.jsConfiguration;
  3. allReact NativeSyntax and configurations that are not supported are supported by compilation configuration.
  4. Configure by compilation with@tarojs/taro-rn-transformergenerateReact NativeEntry file ofindex.ts;
  5. Import file import@tarojs/taro-runtime-rnusecreateReactNativeAppTo pack;
  6. Page file import@tarojs/taro-runtime-rnusecreatePageConfigTo pack;
  7. Start themetro bunlder;
  8. inReact Native ShellEngineering operationreact-native run-ios 或 react-native run-androidloadingindex.bundle

Setting up the development environment

Build the Android development environment

Dependencies that must be installed are:

  • Node
  • React NativeCommand line tool
  • Watchman(You can quickly catch changes to files for real-time refresh)
  • JDK Java Development Kit
  • Android StudioWhile you can use any editor to develop your app (write JS code), you still have to install Android Studio to get the tools and environment you need to build your Android app.

Node, Watchman

We recommend using Homebrew to install Node and Watchman. Execute the following commands on the command line to install:

brew install node
brew install watchman
Copy the code

If you already have Node installed, check to see if it is v8.3 or later. After installing Node, it is recommended to set up an NPM image to speed up the process (or use the science Web tool).

Java Development Kit

React Native requires the Java Development Kit [JDK] 1.8. You can type it on the command line

Javac -version to view the JDK version you currently have installed. If the version does not meet your requirements, you can download it from the official website.

Android Studio development environment

If you’ve never worked on an Android development environment before, be prepared for the tedious process. Read the following instructions carefully and perform configuration operations according to the documents.

Note: Attention please!! Domestic users must have stable scientific tools, otherwise they will encounter link timeout or disconnection in the process of download, installation and configuration and cannot carry out development work. Some Internet access tools may only provide the proxy function of the browser or only provide the proxy function for a specific website. Please configure or replace other software by yourself. In short, if there is an error in the url, then 99% is not normal Internet access. If socks5 proxy is used, the following setting is not useful

# # systemProp. Socks. ProxyHost = 127.0.0.1 systemProp. Socks. ProxyPort = 8016 # systemProp. HTTPS. ProxyHost = 127.0.0.1 # systemProp. HTTPS. ProxyPort = 8016 # systemProp. HTTPS. ProxyHost = socks5: / / # 127.0.0.1 systemProp HTTPS. ProxyPort = 8016Copy the code

The correct setup should look like this: Org. Gradle. Jvmargs = – DsocksProxyHost = 127.0.0.1 – modified DsocksProxyPort = 8016 $HOME /. Gradle/gradle. The properties file, add the sentence above, This will enable gradle agent globally

Install the Android Studio

Start by downloading and installing Android Studio. Domestic users may not be able to open the official link, please use the search engine to search the available download link. Or just click on it

  • Android – studio – 2020.3.1.22 – Windows. Zip
  • The android – studio – 2020.3.1.22 – MAC. DMG

On the installation screen, select the “Custom” option and ensure that the following items are selected:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

Then click “Next” to install the selected component.

If the checkbox is gray, you can skip it and install the components later.

Once the installation is complete and you see the welcome screen, you can perform the following operations.

Install the Android SDK

Android Studio installs the latest version of the Android SDK by default. To build React Native apps, you need an SDK of Android 6.0 (Marshmallow) (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.

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

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image(Official emulator image file, use unofficial emulator 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 required version 23.0.1 is selected for React Native. You can install multiple versions at the same time, and then check the Android Support Repository at the bottom.

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.

To do this, add the following command to the ~/.bash_profile file:

The ~ represents the user directory, /Users/ your username /, and files starting with the decimal point are hidden in the Finder and may not exist. You can run the vi ~/. Bash_profile command on the ue to create or edit the profile. If you are not familiar with VI operation, please click here to learn.

If you are not installing the SDK through Android Studio, the path may be different, so check for yourself.

export ANDROID_HOME=$HOME/Library/Android/sdk  
export PATH=$PATH:$ANDROID_HOME/tools  
export PATH=$PATH:$ANDROID_HOME/platform-tools  
Copy the code

If your command line is something other than bash, such as ZSH, use the corresponding configuration file.

Use the source $HOME/.bash_profile command to make the environment variable Settings take effect immediately (otherwise, they won’t take effect until restart). You can check that this variable is set correctly using echo $ANDROID_HOME.

Make sure you specify the Android SDK path properly. You can view the actual path to the SDK from the “Preferences” menu in Android Studio: Appearance & Behavior → System Settings → Android SDK.

Preparing Android Devices

You’ll need an Android device to run the React Native Android app. The device referred to here can be either a real machine or a simulator. Android officially provides an emulator called Android Virtual Device (AVD). In addition, there are many third-party emulators such as Genymotion, BlueStack, etc. Generally speaking, official simulators are free and full of functions, but their performance is poor. Third-party emulators perform better, but may cost a fee or come with advertising.

Use Android real phone

You can also develop on a real Android machine instead of an emulator by simply connecting it to your computer with a USB cable and following the instructions for running this document on your device.

Using the Android Emulator

You can open “AVD Manager” in Android Studi to see the available virtual devices. Its icon looks like this:

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”.

Select the “x86 Images” TAB, where you can see the Images you have installed previously. You must install the image file before creating virtual devices.

If you do not already have HAXM (Intel Virtual Hardware Acceleration Driver) installed, follow this documentation first.

Then click “Next” and “Finish” to complete the virtual appliance creation.

Build the iOS development environment

The following dependencies must be installed: Node, Watchman, React Native command line tools, and Xcode. While you can use any editor to develop your app (write JS code), you still have to install Xcode to get the tools and environment you need to compile your iOS app.

Node, Watchman

We recommend using Homebrew to install Node and Watchman. Execute the following commands on the command line to install:

brew install node
brew install watchman
Copy the code

If you already have Node installed, check to see if it is v8.3 or later. After installing Node, it is recommended that you set up an NPM image to speed up the process (or use a web tool).

Note: Do not use CNPM! CNPM installed module path is strange, packager can not correctly identify!

Setting up the NPM image:

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
Copy the code

Or use NRM:

$ nrm ls * npm ----- https://registry.npmjs.org/ cnpm ---- https://r.cnpmjs.org/ taobao -- https://registry.npm.taobao.org/ nj ------ https://registry.nodejitsu.com/ skimdb -- https://skimdb.npmjs.com/registry $  nrm use cnpm //switch registry to cnpm Registry has been set to: https://r.cnpmjs.org/Copy the code

Watchman is a tool provided by Facebook to monitor file system changes. Installing this tool can improve development-time performance (Packager can quickly catch changes to files for real-time refreshes).

Yarn

Yarn is a tool provided by Facebook to replace NPM and speed up the download of Node modules. React Native’s command-line tools perform tasks such as creating, initializing, updating projects, and running the Packager service.

npm install -g yarn
Copy the code

After installing YARN, set the image source as follows:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
Copy the code

After yarn is installed, you can use yarn to replace NPM. For example, use yarn to replace the NPM install command. Use yarn to add the name of a third-party library instead of NPM install a third-party library.

CocoaPods

CocoaPods is a package manager written in Ruby. React Native iOS versions require CocoaPods to manage dependencies starting with version 0.60. You can install Cocoapods using the following command.

sudo gem install cocoapods
Copy the code

Or use BREW to install

brew install cocoapods
Copy the code

It also seems that the current latest version cannot be installed below ruby2.6, meaning that if you are using macOS version 10.15 (Catalina) you cannot install it directly. You can try installing an older version. Sudo gem install Cocoapods -v 1.8.4 Refer to issue link github.com/CocoaPods/C…

For more information, visit CocoaPods’ website.

Xcode

React Native currently requires Xcode 9.4 or higher. You can download it on the App Store or on the Apple Developer website. This step installs the Xcode IDE, Xcode’s command-line tools, and the iOS emulator at the same time.

Xcode command line tool

Launch Xcode, and in the Xcode | Preferences | check Locations menu is equipped with a version of the Command Line Tools. Xcode’s command line tools include some necessary tools, such as Git, etc.

The development of

Start Metro Bundler Server


$ yarn dev:rn     # Start RN as YARN (after yarn is installed)
$ npm run dev:rn  # Start using NPM
$ npm run taro dev:rn --port 8081
$= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
$ taro build --type rn --watch --port 8081 # Global install only
$ npx taro build --type rn --watch # NPX is also available to users
Copy the code

Taro will compile the file and start the local Metro Server. If the compile fails, it will start on port 8081MetroBundler (responsible for packaging jsbundles) :

At this point, type in your browserhttp://127.0.0.1:8080, you can see the following page:



At this point, type in your browserhttps://127.0.0.1:8081/index.bundle?platform=ios&dev=trueThe js bundle build for the corresponding terminal platform is triggered.When the build is complete, the browser displays the built JS code

Note: Before proceeding to the next step, ensure that Metro Bundler Server is started properly, that is, your browser can access jsBundle properly.

Start the application

Current support for RN versions 0.60 and above, and Taro3 (support Taro 3.2.0-beta.4 and above, please use version 0.63.2 for the following versions)

  • Taro 3 Corresponding branches: github.com/NervJS/taro…
  • Taro 2 Corresponding branches: github.com/NervJS/taro…
  • Taro 1 Corresponding branch: github.com/NervJS/taro…

The Taro React Native shell differs from the React Native Init project by removing index.js and integrating react-native unimodules. If there is a native project, you need to integrate it by yourself. For details, see the React-native unimodules Readme.

If the previous compilation and Metro Bundler Server start up ok, you can start the application.

Developers can integrate React Native (0.60+) into their own apps. Taro has separated the original parts of the React Native project for easy development and integration. NervJS/taro-native shell / 0.63.2, you can view it as an empty case for React Native iOS/Android applications.

Clone the application code and place it in the root directory. Then change its name to react-native shell:

git clone [email protected]:NervJS/taro-native-shell.git
git clone https://github.com/NervJS/taro-native-shell.git
Copy the code

Then CD react-native shell and use YARN or NPM install to install dependencies.

The project catalog is as follows:

➜ react - native - shell git tree -l 1. (master) ✗ ├ ─ ─ LICENSE ├ ─ ─ the README. Md ├ ─ ─ android / / android project directory ├ ─ ─ ios / / ios ├── ├─ package.json ├─ map.lockCopy the code

Android

You can see the React Native project code in the taro-native shell/ Android directory.

Run the React Native command to start the device

react-native run-android
Copy the code

The Android emulator starts itself and accesses port 8081 to get the JS bundle. Metro Bundler prints the following contents:

BUNDLE [android dev]. / index. Js ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ (1/1), 100.0% done.Copy the code

Running on a real device

Follow these steps to set up your device:

  • Use a USB cable to connect your device to your development machine. If you are developing on Windows, you may need to install the appropriate USB driver for your device.

  • Follow these steps to enable USB debugging in Developer Options. First, you must enable the developer option:

    1. Open the Settings app.
    2. Select System (only on Android 8.0 or later).
    3. Scroll to the bottom and select About Phone.
    4. Scroll to the bottom and press Build Number 7 times.
    5. Go back to the previous screen and find Developer Options near the bottom.
    6. Open Developer Options, then scroll down to find and enable USB debugging.

Follow these steps to run the application on your device:

  1. In Android Studio, click the App module in the Project window and select Run > Run (or click Run in the toolbar).

2. In the Select Deployment Target window, Select your device and click OK

Run it on the simulator

Follow these steps to run the application on the emulator:

  1. In Android Studio, click the App module in the Project window and select Run (or click Run in the toolbar).
  2. In the Select Deployment Target window, click Create New Virtual Device.
  3. On the Select Hardware screen, Select the phone device (such as Pixel), and then click Next.
  4. On the System Image screen, select the version with the highest API level. If you do not have the version installed, a Download link will be displayed, so please click on that link and complete the Download.
  5. Click Next.
  6. On the Android Virtual Device (AVD) screen, leave all Settings unchanged and click Finish.
  7. Go back to the Select Deployment Target dialog, Select the device you just created, and then click OK.

Android Studio installs and launches the application on the emulator

iOS

Run the React Native command to start the device

$ cd ios & pod install
$ cd .. 
$ react-native run-ios
Copy the code

⚠️ Note: The pod install process cannot be omitted.

The iOS emulator starts itself and accesses port 8081 to get the JS bundle. Metro Bundler prints the following:

BUNDLE [ios dev]. / index. Js ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ ▓ (1/1), 100.0% done.Copy the code

Start with Xcode

Starting iOS is easy, just use Xcode to open the iOS directory and hit the Run button.The moduleName of jsBundle is set to “taroDemo” by default. This moduleName must be consistent with the appName field configured for Rn in config/index.js.

const config = {
  ...
  rn: {
    appName: 'taroDemo',
  }
  ...
}
Copy the code

This configuration is in the appdelegate.m file.

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import <UMCore/UMModuleRegistry.h>
#import <UMReactNativeAdapter/UMNativeModulesProxy.h>
#import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif

@interface AppDelegate (a) <RCTBridgeDelegate>
 
@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;
 
@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  
  self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];

  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"taroDemo"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0 f green:1.0 f blue:1.0 f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [super application:application didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
    NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
    // If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
    return extraModules;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end
Copy the code

For more information, see the Xcode documentation: Building Your App

The existing problems in

Some applications are sensitive to package size and feel that the package size increases too much after integrating React-native Unimodules.

You can configure exclude packages that you do not need: use_unimodules! (exclude: [‘ expo – face – detector]) or addUnimodulesDependencies ([exclude: [‘ expo – face – detector]])

Reducing App Size In Future?

Android application flash back and an error: Java lang. NoSuchMethodError: No static method loadLibrary (Ljava/lang/String;) V in class Lcom/facebook/soloader/SoLoader; Or its super classes reference: github.com/NervJS/reac…

Adb Reverse TCP :8081 TCP :8081 adb reverse TCP :8081 ADB reverse TCP :8081 ADB reverse TCP :8081 ADB reverse TCP :8081 ADB reverse TCP :8081 ADB reverse TCP :8081 ADB reverse TCP :8081

IOS error: _reactNative. UIManager. GetViewManagerConfig is not a function reference: github.com/NervJS/reac…

React-native runs in new versions of Xcode (10+).