react-native 啟動頁設定(android)
阿新 • • 發佈:2018-11-30
使用第三方外掛:react-native-splash-screen
下載地址:https://www.npmjs.com/package/react-native-splash-screen
第一步:安裝下載外掛
1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen // 自動連結了,就不用手動配置了哈
第二步:在android中進行相關配置
1、在android/app/src/main/java/com/xxx/MainActivity.java 檔案中新增所示的程式碼
package xxxx; import android.os.Bundle; // here 第一處 import com.facebook.react.ReactActivity; import org.devio.rn.splashscreen.SplashScreen; // here 第二處 public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected void onCreate(Bundle savedInstanceState) { // here 第三處 SplashScreen.show(this); super.onCreate(savedInstanceState); } @Override protected String getMainComponentName() { return "xxx"; } }
2、android/app/src/main/res目錄中,新建layout目錄,在此目錄下,建立launch_screen.xml檔案,複製以下內容( 其中 launch_screen 為啟動的圖片名 )
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>
3、在android/app/src/main/res目錄中,新建drawable-xhdpi和drawable-xxhdpi目錄,在其中放入啟動頁圖片,命名為launch_screen.png
第三步:配置好了,啟動頁頁正常顯示了,肯定對應關閉啟動頁啦~~~
那這個是什麼意思呢,就是元件掛載完成後,然後呢進行一個關閉啟動頁,具體位置就自己決定在哪個頁面關閉啦
componentDidMount() {
SplashScreen.hide(); // 關閉啟動頁
}