react-native-splash-screen 给安卓项目添加启动图

react-native-splash-screen 给安卓项目添加启动图

react-native-splash-screen 基本配置

  • 安装插件:npm install react-native-splash-screen --save
  • 关联项目:react-native link react-native-splash-screen or rnpm link react-native-splash-screen

link 之后,安卓项目中会自动添加头文件 以及部分代码,为保证项目顺利运行,还请确认下面代码是否已经完善。

  • 确保 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')

* android/app/build.gradle 文件中 添加依赖 `react-native-splash-screen`

    ```
...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}
  • 更新 MainApplication.java 文件
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// 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
        protected 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;
    }
}

准备添加代码和文件配置

  • app/src/main/res/layout 文件夹下 添加 launch_screen.xml 并copy如下代码:
<?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>
  • 创建文件夹 drawable-xhdpidrawable-xxhdpi(暂时先创建这两个就够了),将准备好的启动图 命名为 launch_screen.png 分别放入创建好的文件夹

  • 白屏问题,设置透明背景:android/app/src/main/res/values/styles.xml 文件夹下 添加 <item name="android:windowIsTranslucent">true</item>

<resources>

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">


<item name="android:windowIsTranslucent">true</item>
</style>
</resources>


* `android/app/src/main/res/values/colors.xml` 文件夹下,添加如下:

    ```
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary_dark">#660B0B0B</color> </resources>
  • 适当的时刻 隐藏启动图 可以是在视图挂载完毕,可以是网络请求结束之后
import SplashScreen from 'react-native-splash-screen'
componentDidMount() {
    SplashScreen.hide();
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容