居中图像 React Native 加载屏幕

Posted 2023-02-21

【中文标题】居中图像 React Native 加载屏幕

【英文标题】：Center Image React Native Loading Screen

【发布时间】：2018-01-22 22:06:45

【问题描述】：

背景

我在屏幕上放置了一张图片，用于显示屏幕何时加载其他内容。

我想使图像居中，使其始终位于所有设备的中心。

问题

目前图像显示在顶部中心。我也希望它垂直对齐。还要确保它在所有设备上看起来总是一样的。

问题

有什么解决方案可以确保图像始终居中且尺寸适合所有设备？

例子，

我当前的代码，

在 Photoshop 中

图像为 300 分辨率 高度为 776 像素 宽度为 600 像素

我希望图像在所有设备中水平和垂直居中，并且在没有像素化的情况下看起来不错。本机我知道我需要设置图像大小。但是根据我对 React Native 的理解，我可以在图像上使用，然后使用 JSX 来处理它的响应式。

import React from 'react';
import 
  StyleSheet,
  View,
  Image,
 from 'react-native';

const logo = require('../images/logo.jpg');

const LoadingScreen = () => (
    <View>
        <Image
            style=styles.logo
            source=logo
        />
    </View>
);

const styles = StyleSheet.create(
    logo: 
        justifyContent: 'center',
        alignItems: 'center',
        width: 300,
        height: 400,
    ,
);

export default LoadingScreen;

【参考方案1】：

您需要为justifyContent 设置<View> 的样式，为<Image> 居中设置alignItems。

应该是这样的：

const LoadingScreen = () => (
<View style=styles.container>
    <Image
        style=styles.logo
        source=logo
    />
</View>
);

const styles = StyleSheet.create(
  container: 
    justifyContent: 'center',
    alignItems: 'center',
  ,
  logo: 
    width: 300,
    height: 400,
  ,
);

或者您可以在<Image> 上使用alignSelf 使其居中，但仍需要在<View> 上添加justifyContent 使其垂直居中。

【参考方案2】：

在父视图中设置：

justifycontent:center

在子集中：

alignself:center

【参考方案3】：

设置在视图中：

justifycontent:center

在孩子身上：

alignself:center

并执行任务。

【参考方案4】：

View 容器的样式应为

flexDirection: 'column'
justifyContent: 'center'
alignItems: 'center'
height: '100%'

高度确保它跨越整个页面，从而使图像垂直和水平对齐。

对于图像大小，我认为使用百分比可以解决问题，而不是定义明确的宽度/高度。

【讨论】：

我是这样工作的，你认为这对所有设备都有好处吗？ const LoadingScreen = () => ( ); const styles = StyleSheet.create( container: display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', , logo: width: 220, height: 300, marginTop: -50 , , );