react-native启动屏得坑总结

++ios设置启动屏得坑总结以及记录++

1. Images.xcassets 中添加LaunchImage启动屏 将图片依次导入
2. LaunchImage设置中将iphone6得图片去除掉，可以不去除
3. LaunchScreen.xib文件中设置Use as Launch Screen勾选去掉
4. General -> Build Settings -> 搜索Launch => 在Asser Catalog Launch Set Name 中添加之前所添加的启动屏名字
5. General -> Launch Screen File中删除默认的文字
6. 由于在启动过程中会出现白屏得问题，所以我们需要借助第三方插件react-native-splash-screen
7. yarn add react-native-splash-screen --save
8. 新版本中只需要运行 react-native link react-native-splash-screen 自动安卓即可
9. ios AppDelegate.m 文件中添加代码

#import "RNSplashScreen.h"
[RNSplashScreen show]

10. 如果在使用过过程中出现 'SplashScreen.h' file not found问题,你可以下面的代码添加到Header Search Paths中,步骤如下:

//选择你的项目,TARGET → Build Settings → Search Paths → Header Search Paths 添加:

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

++android设置启动屏得坑总结以及记录++

1. 修改android->app->src->main->res->mipmap-hdpi所以尺寸的图片，包含图标以及启动屏幕图片
2. 在这个文件下新建 layout文件夹并添加 launch_screen.xml文件，文件内容如下

<?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="@mipmap/screen"> //图片地址
    </LinearLayout>

3. 在添加react-native-splash-screen插件后，自动链接安卓方法会有问题，必须手动去修改MainActivity.java和MainApplication.java

//MainActivity.java

package com.rndmoe;

import android.os.Bundle;  //添加部分
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; //添加部分

public class MainActivity extends ReactActivity {
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
   //添加部分
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 添加这一句
        super.onCreate(savedInstanceState);
    }

  @Override
  protected String getMainComponentName() {
    return "RnDmoe";
  }
}

//MainApplication.java

package com.rndmoe;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import org.devio.rn.splashscreen.SplashScreenReactPackage; //添加部分
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

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() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          new SplashScreenReactPackage();   //添加部分，必须;号结尾
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this); // Remove this line if you don't want Flipper enabled
  }

  /**
   * Loads Flipper in React Native templates.
   *
   * @param context
   */
  private static void initializeFlipper(Context context) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.facebook.flipper.ReactNativeFlipper");
        aClass.getMethod("initializeFlipper", Context.class).invoke(null, context);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

4. AndroidManifest.xml 文件内可以修改图标得位置

android:roundIcon="@mipmap/ic_launcher"

使用

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

SplashScreen.hide();//关闭启动屏幕