首页 > 解决方案 > 如何在 react-native-splash-screen 的 android 初始屏幕中设置响应式徽标?

问题描述

我正在尝试使 android 初始屏幕中的徽标在不同的 android 设备上正确缩放。

我按照 npm react-native-splash-screen的说明进行操作。

初始屏幕徽标在 iOS 上可以很好地缩放,但在 Android 上它会延伸到屏幕之外,如下图所示。

在此处输入图像描述

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>

安卓过滤器:

在此处输入图像描述

项目筛选:

在此处输入图像描述

标签: androidreact-nativesplash-screen

解决方案


你是在本地做的

虽然我已经用 react native 方式做到了

import React, { PureComponent } from "react";
import { Image, View } from "react-native";
import { Images, Metrics } from "@common";
import { Navigator } from "@services";
import styles from "./styles";
import SplashScreenComponent from "react-native-splash-screen";

const minDisplayTime = 1000;

class SplashScreen extends PureComponent {
  componentDidMount() {
    SplashScreenComponent.hide();

    setTimeout(() => Navigator.navigate("AuthLoading"), 5000);
  }

  render() {
    return (
      <View style={styles.container}>
        <Image
          source={Images.splashGif}
          style={{ width: '90%', borderWidth: 1, borderColor: '#fff' }}
          resizeMode={"contain"}
        />
      </View>
    );
  }
}

export default SplashScreen;


推荐阅读