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

When React-Native starts up, there will be a temporary white screen, which is short for ios and longer for Android, about 1-3s. This is due to how React – Native works. When react-Native starts, it loads JS bundles into memory and renders the interface, which is an empty View during this time. The experience was obviously very bad, so we needed a launch page to slow down the process and improve the user experience.

Since it is loading js bundle, we have to solve this problem from the native application. After clicking the app icon, we will open a friendly startup page for the first time, and then listen to the status of JS bundle. If the JS bundle starts running we close the startup page. It doesn’t seem like a difficult idea, but it can be difficult for web front-end engineers who haven’t written native programs. So how to solve it? Here we recommend a third-party component, React-Native splash- Screen, which helps us to encapsulate most of the configuration. We can use it if we need to do some integration.

Download the react – native – splash screen

Install NPM or YARN as usual

yarn react-native-splash-screen
# or npm
npm i react-native-splash-screen -S
Copy the code

Automatic installation

react-native link react-native-splash-screen
Copy the code

Manual installation

Android:

  • In your Android/settings.gradle file, add the following:
include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '.. /node_modules/react-native-splash-screen/android')Copy the code
  • In your Android/app/build.gradle file, add the: react-native-splash-screen project as a compile-time dependency:
. dependencies { ... implementation project(':react-native-splash-screen') }Copy the code
  • Update the mainApplication. Java file to use the react-native splash-screen with the following changes:
/ / the react - native - splash screen - > = 0.3.1 import org. Devio. Rn. Splashscreen. SplashScreenReactPackage; / / the react - native - splash screen - < 0.3.1 import com. Cboy. Rn. Splashscreen. SplashScreenReactPackage; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage() //here ); }}; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }}Copy the code

ios

  • Method 1: Run the following command
cd ios
run pod install
Copy the code
  • Method 2:
  1. Right-click ➜ Add Files to [Your project’s name] in the Libraries folder in the Xcode project directory.
  2. Go to node_modules ➜ react-native-splash-screen ➜ ios ➜ and select splashscreen.xcodeProj
  3. In XCode, in the project navigator, Add libsplashscreen. a to your project’s Build Phases ➜ Link Binary With Libraries
  4. To fix ‘RNSplashScreen.h’ file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:

$(SRCROOT)/.. /node_modules/react-native-splash-screen/ios

Configure the plug-in

Android

Update mainActivity.java to use react-native splash-screen with the following changes:

import android.os.Bundle; // here import com.facebook.react.ReactActivity; / / the react - native - splash screen - > = 0.3.1 import org. Devio. Rn. Splashscreen. Splashscreen; / / here / / react - native - splash screen < 0.3.1 import com. Cboy. Rn. Splashscreen. The splashscreen; // here public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) {  SplashScreen.show(this); // here super.onCreate(savedInstanceState); } / /... other code }Copy the code

iOS:

Update the AppDelegate. M:

#import "AppDelegate.h" #import <React/RCTBundleURLProvider.h> #import <React/RCTRootView.h> #import "RNSplashScreen.h" // here @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // ... other code [RNSplashScreen show]; // here // or //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView]; return YES; } @endCopy the code

Preparation of each end

Android is ready to launch the screen

The steps are as follows:

  1. Open mainActivity. Java and follow steps 1, 2 and 3 below to add the startup screen package and the method:

  1. Create a layout folder in android/app/ SRC /mian/res and create launch_screen.xml in the layout folder you created
<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/launch_screen"> </LinearLayout>Copy the code
  1. Create the drawable xhdpi folder in android/app/ SRC /mian/res and add an image named launch_screen.png.

  1. Need the android/app/SRC/main/res/values/styles. The XML to add true set transparent background
<resources> <! -- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <! -- Customize your theme here. --> <! - set the transparent background - > < item name = "android: windowIsTranslucent" > true < / item > < / style > < / resources >Copy the code

Ios ready to launch screen

Customize the initial screen with launchscreen.storyboard or launchscreen.xib. LaunchScreen. Storyboard tutorial

Begin to use

Import the react-native splash-screen in the js import file and call splashscreen.hide () in the mount event.

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}
Copy the code