#6 初试React-Native启动屏

"react-native": "0.57.4",
"react-native-splash-screen": "^3.1.1",

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

// react-native-splash-screen >= 0.3.1 如果版本大于0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1  如果版本小于0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;


    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new SplashScreenReactPackage(),
            new VectorIconsPackage() // 这里我的文件是自动添加的，所以如果没有则添加
      );
    }

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 如果要全屏显示，SplashScreen.show(this, true);
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

<?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">  // 与layout文件夹同级，新建drawable文件夹，放入名为launch_screen的png文件
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#fff</color>
</resources>

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color">#fff</color>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

SplashScreen.show(this, R.style.SplashScreenTheme);

###### 版本信息： ``` "react-native": "0.57.4", "react-native-splash-screen": "^3.1.1", ``` 自己刚入门`React-Native`，自己在测试的时候，发现第一次打开`App`会有短暂的白屏，于是找到了`react-native-splash-screen`这个库，此次主要记录解决过程 ##### 安装 `react-native-splash-screen` `yarn add react-native-splash-screen` ##### 查看`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') ``` > 如果没有，请手动`Link`，`react-native link react-native-splash-screen` ##### 在`android/app/build.gradle`文件中添加以下代码(会报错，暂未解决) ``` ... dependencies { ... compile project(':react-native-splash-screen') } ``` ##### 打开`Project\android\app\src\main\java\com\project\MainApplication.java`添加 ```JavaScript // react-native-splash-screen >= 0.3.1 如果版本大于0.3.1 import org.devio.rn.splashscreen.SplashScreenReactPackage; // react-native-splash-screen < 0.3.1 如果版本小于0.3.1 import com.cboy.rn.splashscreen.SplashScreenReactPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage(), new VectorIconsPackage() // 这里我的文件是自动添加的，所以如果没有则添加 ); } ``` ##### 打开 `MainActivity.java`文件 ``` import android.os.Bundle; // here import com.facebook.react.ReactActivity; // react-native-splash-screen >= 0.3.1 import org.devio.rn.splashscreen.SplashScreen; // here // react-native-splash-screen < 0.3.1 import com.cboy.rn.splashscreen.SplashScreen; // here public class MainActivity extends ReactActivity { @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // 如果要全屏显示，SplashScreen.show(this, true); super.onCreate(savedInstanceState); } // ...other code } ``` ##### 在这个目录(没有layout则新建)`app/src/main/res/layout`下创建`launch_screen.xml`，写入 ```javascript <?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"> // 与layout文件夹同级，新建drawable文件夹，放入名为launch_screen的png文件 </LinearLayout> ``` ##### 新建`color.xml`在`app/src/main/res/values/`目录，写入 ``` <?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary_dark">#fff</color> </resources> ``` ##### 如果需要设置透明背景，在`android/app/src/main/res/values/styles.xml`文件中添加以下`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> ``` ##### 如果需要自定义状态栏颜色,在`android/app/src/main/res/values/colors.xml`添加 ``` <?xml version="1.0" encoding="utf-8"?> <resources> <color name="status_bar_color">#fff</color> </resources> ``` 在`android/app/src/main/res/values/styles.xml`文件中引用 ``` <?xml version="1.0" encoding="utf-8"?> <resources> <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme"> <item name="colorPrimaryDark">@color/status_bar_color</item> </style> </resources> ``` 在`MainActivity.java`文件中修改`show`方法 ```java SplashScreen.show(this, R.style.SplashScreenTheme); ``` > IOS暂未配置。。。[gitHub地址](http://hujiahua.site:8001/hujiahua/wyApp)