React Native+第三方库(react-native-splash-screen)实现APP启动页

O&REO

已于 2023-09-21 17:32:43 修改

阅读量525

点赞数 3

文章标签： react native react.js javascript

于 2023-07-18 01:58:49 首次发布

可以不署名随便用，也可以署名

本文链接：https://blog.csdn.net/qq_36001281/article/details/131778334

版权

最近想写一个react-native启动页网上最多的教程是使用react-native-splash-screen

https://github.com/crazycodeboy/react-native-splash-screen

而官方文档过于不详细于是今天踩坑后结合现有文档完善了下撸一份目前的可行方案

我的版本:

react-native	0.70.6
react-native-splash-screen	3.3.0

首先下载安装包： npm i react-native-splash-screen --save

官方分自动安装（按照官方教程我没成功），还有手动安装，我们这里采用手动安装

在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')

2. 在android/app/build.gradle（路径不同于第一步）目录下中的 dependencies 对象，引入该安卓包：

...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}

3. 在android/app/src/main/java/com/xxxxx/MainActivity.java目录下，引入该安卓包：

import android.os.Bundle;  
import org.devio.rn.splashscreen.SplashScreen; 

@Override
   protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here 
   super.onCreate(savedInstanceState);
 }

这是别人给出的👆实际我的版本的rn可以自动导入的样子并不需要添加 SplashScreen.show(this);添加反而报错于是我的是👇

import android.os.Bundle;  
import org.devio.rn.splashscreen.SplashScreen; 

@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 Package());
      return packages;
    }

4. 在android/app/src/main/java/com/xxxxx/MainApplication.java 引入以下代码

 import org.devio.rn.splashscreen.SplashScreenReactPackage;

此时直接运行还是出现报错，继续接下来的步骤

5. 在android/app/src/main/res下创建layout文件夹，在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="@drawable/launch_screen">
</LinearLayout>

6. 在android/app/src/main/res/values文件夹下创建color.xml

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

7. 在android/app/src/main/res下创建名为drawable-xhdpi文件(注意：这里可以创建drawable其他尺寸的文件 )，图片名称:launch_screen

8. 在App.js下添加以下代码：

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

export default (): React.ReactElement => {
useEffect(() => {
      SplashScreen.hide();
  }, []);
  const topState = useBottomNavigationState();
...
}；

9. 重新编译运行 react-native run-android / yarn android

eg : 虽然是成功了不过还是有些不完美，还是有一点白屏的存在，这时我们打开

android/app/src/main/res/values/styles.xml文件,添加<item name="android:windowIsTranslucent">true</item>,如下 :

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item> //<--添加这个
    </style>
</resources>