前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-native 启动页

react-native 启动页

原创
作者头像
conanma
修改2021-11-02 17:54:50
1.3K0
修改2021-11-02 17:54:50
举报
文章被收录于专栏:正则正则

1. 安装

npm i react-native-splash-screen --save

2. 自动关联

react-native link react-native-splash-screen

3. 修改MainActivity.java文件

  • MainActivity.java位置: ./项目/android/app/src/main/java/com/项目名/Mainctivity.java;
  • 修改后MainActivity.java所有代码如下:

注意事项:

  • 当前使用的"react-native-splash-screen": "^3.2.0",因此如下图所示,import不同的包(目前应该没有在使用低版本的了);

image.png

代码语言:javascript
复制
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);
    }
}

4. 添加 launch_screen.xml

检查./app/src/main/res/layout/launch_screen.xml 是否存在,默认应该是没有layout文件夹的,需要手动创建layout文件夹,然后在layout文件夹下新建launch_screen.xml,将以下内容复制进去:

代码语言:javascript
复制
<?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

5. 添加启动图片

app/src/main/res/下新建以下文件夹:

以下文件夹中放启动页的图片,系统会根据当前设备自动选择,android 环境下可以只放一个,会自适应缩放,然后将启动页图片命名为launch_screen.png(在launch_screen.xml中指定android:src="@drawable/launch_screen",所以要是这个名字)

  • drawable-ldpi
  • drawable-mdpi
  • drawable-hdpi
  • drawable-xhdpi
  • drawable-xxhdpi
  • drawable-xxxhdpi

如图所示:

image.png

6. 设置colors.xml文件

创建文件:app/src/main/res/values/colors.xml

内容如下:

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

7. 设置启动页透明背景

修改 : android/app/src/main/res/values/styles.xml 如下所示:

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

8. 启动页自动消失

根据自己业务设置

代码语言:javascript
复制
import SplashScreen from 'react-native-splash-screen';

componentDidMount() {
    setTimeout(()=>{
      SplashScreen.hide(); // 隐藏启动屏
    },3000)
  }

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 安装
  • 2. 自动关联
  • 3. 修改MainActivity.java文件
  • 4. 添加 launch_screen.xml
  • 5. 添加启动图片
  • 6. 设置colors.xml文件
  • 7. 设置启动页透明背景
  • 8. 启动页自动消失
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档