github网址:https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md
安装说明
第一步(下载):
在项目根目录打开终端运行 npm i react-native-splash-screen --save
第二步 (安装):
自动安装
终端运行:react-native link react-native-splash-screen
或 rnpm link react-native-splash-screen
手动安装(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')
- 在你的 android/app/build.gradle 文件中添加 :react-native-splash-screen:
dependencies {
...
implementation project(':react-native-splash-screen')
}
- 更新你的MainApplication.java 文件,如下:
第十一行引入
import com.facebook.react.shell.MainReactPackage;
import java.util.Arrays;
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() //添加这一句
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
第三步(配置):
更新你的 MainActivity.java 文件如下:
第三行引入
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // 添加这一句
super.onCreate(savedInstanceState);
}
// ...other code
}
使用说明
- 将 react-native-splash-screen 导入你的JS 文件。
import SplashScreen from 'react-native-splash-screen'
- 新建android\app\src\main\res\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>
- 新建
android\app\src\main\res\drawable-hdpi
文件夹,把启动页图片放进去,命名为launch_screen.png
- 如果你只做了以上步骤,你的程序会闪屏后退出,所以你需要在android\app\src\main\res\values\colors.xml文件中加入
<color name="primary_dark">#660B0B0B</color>
做了以上步骤android启动屏就完成了
另外:
你也可以启用app主题透明选项来解决在APP启动时因主题原因导致的短暂白屏的问题,具体步骤如下:
打开 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>
API
方法 | 类型 | 可选 | 描述 |
---|---|---|---|
show() | function | false | 打开启动屏幕(原生方法) |
hide() | function | false | 关闭启动屏幕 |