react-native-splash-screen 给安卓项目添加启动图
react-native-splash-screen 基本配置
- 安装插件：
npm install react-native-splash-screen --save - 关联项目：
react-native link react-native-splash-screenorrnpm 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-xhdpi、drawable-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();
}
