1. RN笔记 - 配置启动页(android)

RN笔记 - 配置启动页(android)

1. 安装启动页的包

   $ yarn add react-native-splash-screen
   or
   $ npm install react-native-splash-screen --save
   

2. 配置RN关联(link)

   $ react-native link react-native-splash-screen
   

3. 配置android文件 android/settings.gradle添加代码

   include ':react-native-splash-screen'   
   project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
   

4. android/app/build.gradle添加代码

   // 在 dependencies中 添加如下代码
   implementation project(':react-native-splash-screen') 
   // 例如
   dependencies {
   	implementation project(':react-native-splash-screen') 
   }
   

5. android/app/src/main/java/MainApplication.java 添加代码

   	import org.devio.rn.splashscreen.SplashScreenReactPackage; 
   	// 在ReactApplication 对象, getPackages方法中添加如下代码
   	packages.add(new SplashScreenReactPackage());
   	// 完整示例
   	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();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new SplashScreenReactPackage()); // 添加的代码
          return packages;
        }
   
        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };
      }
   

6. android/app/src/main/java/MainActivity.java 添加代码

   import android.os.Bundle; 
   import org.devio.rn.splashscreen.SplashScreen;
   // 在ReactActivity 对象中添加
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  
        super.onCreate(savedInstanceState);
    }
   

7. android/app/src/main/res/layout目录下(没有该目录自己创建) 创建launch_screen.xml文件并添加代码

   <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical" android:layout_width="match_parent"
       android:layout_height="match_parent">
       <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
   </RelativeLayout>
   

8. android/app/src/main/res/ 目录下创建我文件夹:

   • drawable-ldpi
   • drawable-mdpi
   • drawable-hdpi
   • drawable-xhdpi
   • drawable-xxhdpi
   • drawable-xxxhdpi

9. 将不同尺寸的启动图放置到对应的drawable文件夹 , 图片名称为: launch_screen

10. 修改/创建 app/src/main/res/values/colors.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="primary_dark">#000000</color>
    </resources>
    

11. 在对应的位置关闭启动图

    import SplashScreen from 'react-native-splash-screen'
    
    export default class WelcomePage extends Component {
        componentDidMount() {
            SplashScreen.hide(); // =>引入文件，调用该方法关闭启动图
        }
    }
    

12. 此时可能会报错

    • 在 \node_modules\react-native-splash-screen\android\src\main\java\org\devio\rn\splashscreen\SplashScreenModule.java SplashScreenModule.java 中添加如下代码

    @Override    
    public boolean canOverrideExistingModule() { return true; }