react-native-splash-screen(啟動(dòng)頁(yè))
1. 安裝
npm i react-native-splash-screen --save
react-native link react-native-splash-screen
2. 添加代碼
在MainActivity中添加一下代碼
import android.os.Bundle; //add
import org.devio.rn.splashscreen.SplashScreen; //add
public class MainActivity extends ReactActivity {
···
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // add
super.onCreate(savedInstanceState);
}
}
3. 使用
1. 在android/app/src/main/res目錄下創(chuàng)建layout文件夾，并在創(chuàng)建的layout文件夾中創(chuàng)建launch_screen.xml文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/splashscreen"
android:scaleType="centerCrop"/>
</LinearLayout>
2.在res文件夾下創(chuàng)建drawable文件夾蛹锰，并添加一個(gè)名為splashscreen的圖片文件
3. 添加一個(gè)名為primary_dark的app/src/main/res/values/colors.xml
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
4. 解決白屏的問(wèn)題
在app/src/main/res/values/styles.xml文件添加下面代碼
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
5. 在React-Native的主界面添加如下代碼
import React, {Component} from 'react';
import RootScene from "./src/RootScene";
import SplashScreen from 'react-native-splash-screen';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<RootScene/>
);
}
componentDidMount(): void {
this.timer = setTimeout(() => {
// 隱藏啟動(dòng)頁(yè)
SplashScreen.hide();
}, 2000);
}
componentWillUnmount(): void {
this.timer && clearTimeout(this.timer);
}
}
界面的效果圖
SplashScreen.gif
