"react-native": "0.57.4", "react-native-splash-screen": "^3.1.1",
自己刚入门React-Native,自己在测试的时候,发现第一次打开App会有短暂的白屏,于是找到了react-native-splash-screen这个库,此次主要记录解决过程
React-Native
App
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
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
// 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 }
app/src/main/res/layout
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"> // 与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方法
show
SplashScreen.show(this, R.style.SplashScreenTheme);
IOS暂未配置。。。gitHub地址
版本信息:
自己刚入门
React-Native
,自己在测试的时候,发现第一次打开App
会有短暂的白屏,于是找到了react-native-splash-screen
这个库,此次主要记录解决过程安装
react-native-splash-screen
yarn add react-native-splash-screen
查看
android/settings.gradle
文件有没有以下代码在
android/app/build.gradle
文件中添加以下代码(会报错,暂未解决)打开
Project\android\app\src\main\java\com\project\MainApplication.java
添加打开
MainActivity.java
文件在这个目录(没有layout则新建)
app/src/main/res/layout
下创建launch_screen.xml
,写入新建
color.xml
在app/src/main/res/values/
目录,写入如果需要设置透明背景,在
android/app/src/main/res/values/styles.xml
文件中添加以下item
如果需要自定义状态栏颜色,在
android/app/src/main/res/values/colors.xml
添加在
android/app/src/main/res/values/styles.xml
文件中引用在
MainActivity.java
文件中修改show
方法