react-native android或ios开启应用白屏解决方案

react-native android或ios开启应用白屏解决方案

本文章首先感谢https://medium.com/handlebar-labs/how-to-add-a-splash-screen-to-a-react-native-app-ios-and-android-30a3cec835ae该网站在我初学react-native的时候，在这个问题上给予我帮助，在这里以android为例，一步一步演示怎么解决开启应用白屏这个问题。ios版的比较简单，可直接上上面这个网站上看，可能需要翻墙才能看而且是英文，如果以后实在有人需要，我再发ios版的吧。

---

1. 获取不同分辨率的封面跳转图

设备有各种形状和大小，因此我们的闪屏图像也需要有各种尺寸。在这里我推荐使用apetools网站：
http://apetools.webprofusion.com/tools/imagegorilla

选择Upload Your Splashscreen，上传图片确定后，即可下载各种帮你调整好的图片
解压缩后，看到这样一些文件图片，我们只关心android和ios就好

2. 将图片放入指定位置

打开刚才解压缩后的文件夹，进入android->res目录，将其中的hdpi、mdpi、xhdpi、xxhdpi文件夹复制到你的react-native项目的android->app->src->main->res目录下

3. 创建“可绘制资源文件”

用android studio打开你的react-native项目中的android目录。
在res下的drawable目录上右键，选择new一个drawable-resource-file，填写文件名，ok

在文件内部粘贴以下内容

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap
            android:gravity="fill"
            android:src="@drawable/screen"/>
    </item>
</selector>

4. 修改styles文件

找到values目录下的styles.xml，添加一个style

<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

5. 更新AndroidManifest.xml

我们将创建一个名为“.SplashActivity”的新活动。打开manifests目录下的AndroidManifest.xml，在application标签中再加一个activity，代码如下：

<activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:theme="@style/SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

6. 创建新java类SplashActivity

现在我们需要告诉SplashActivity去MainActivity，它代表了我们的实际应用。为此，您需要创建一个名为的新Java类SplashActivity。

将如下代码填入（注意第一行不要复制）

package com.tcsp_app;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

7. 愉快的运行吧

react-native run-android看看成果吧，可能第一次运行时没有效果，你把应用关了再开一遍就好了

欢迎大家踊跃交流