npm i react-native-splash-screen --save
react-native link react-native-splash-screen
MainActivity.java
文件MainActivity.java
位置: ./项目/android/app/src/main/java/com/项目名/Mainctivity.java
;MainActivity.java
所有代码如下:注意事项:
"react-native-splash-screen": "^3.2.0"
,因此如下图所示,import不同的包(目前应该没有在使用低版本的了);image.png
package com.awesomeproject;
import android.os.Bundle; // here
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
import com.facebook.react.ReactActivity;
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 String getMainComponentName() {
return "AwesomeProject";
}
// 这部分是新增的
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this); // here
super.onCreate(savedInstanceState);
}
}
launch_screen.xml
检查./app/src/main/res/layout/launch_screen.xml
是否存在,默认应该是没有layout
文件夹的,需要手动创建layout
文件夹,然后在layout
文件夹下新建launch_screen.xml
,将以下内容复制进去:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>
如图:
image.png
在 app/src/main/res/
下新建以下文件夹:
以下文件夹中放启动页的图片,系统会根据当前设备自动选择,android 环境下可以只放一个,会自适应缩放,然后将启动页图片命名为
launch_screen.png
(在launch_screen.xml
中指定android:src="@drawable/launch_screen"
,所以要是这个名字)
如图所示:
image.png
colors.xml
文件创建文件:app/src/main/res/values/colors.xml
内容如下:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
修改 : android/app/src/main/res/values/styles.xml
如下所示:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!--设置透明背景-->
<item name="android:windowIsTranslucent">true</item>
</style>
</resources>
根据自己业务设置
import SplashScreen from 'react-native-splash-screen';
componentDidMount() {
setTimeout(()=>{
SplashScreen.hide(); // 隐藏启动屏
},3000)
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。