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
看看成果吧,可能第一次运行时没有效果,你把应用关了再开一遍就好了
欢迎大家踊跃交流