react-native-splash-screen 給安卓項(xiàng)目添加啟動(dòng)圖
react-native-splash-screen 基本配置
- 安裝插件：
npm install react-native-splash-screen --save - 關(guān)聯(lián)項(xiàng)目：
react-native link react-native-splash-screenorrnpm link react-native-splash-screen
link 之后吓肋，安卓項(xiàng)目中會(huì)自動(dòng)添加頭文件 以及部分代碼，為保證項(xiàng)目順利運(yùn)行另假，還請(qǐng)確認(rèn)下面代碼是否已經(jīng)完善。
-
確保
android/settings.gradle文件夾已經(jīng)有下面代碼
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;
}
}
準(zhǔn)備添加代碼和文件配置
-
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>
創(chuàng)建文件夾
drawable-xhdpi资铡、drawable-xxhdpi（暫時(shí)先創(chuàng)建這兩個(gè)就夠了）电禀，將準(zhǔn)備好的啟動(dòng)圖 命名為launch_screen.png分別放入創(chuàng)建好的文件夾-
白屏問題，設(shè)置透明背景：
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>
- 適當(dāng)?shù)臅r(shí)刻 隱藏啟動(dòng)圖 可以是在視圖掛載完畢尖飞，可以是網(wǎng)絡(luò)請(qǐng)求結(jié)束之后
import SplashScreen from 'react-native-splash-screen'
componentDidMount() {
SplashScreen.hide();
}
