Question

背景

我在屏幕上放置了一个图像，用于显示屏幕加载其他内容的时间。

我希望将图像居中，使其始终以所有设备为中心。

问题

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

问题

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

示例，

我目前的代码，

在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;

Answer 1

您需要为<View> alignItems justifyContent and`设置for centering the的样式。

应该是这样的：

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,
  },
});

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

Answer 2

View容器的样式应为

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

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

对于图像尺寸，我认为使用百分比可以做到这一点，而不是定义明确的宽度/高度。

Answer 3

设置为视图：

justifycontent:center

在孩子中：

alignself:center

并执行任务。

Answer 4

在父视图中设置：

justifycontent:center

在子集中：

alignself:center

Answer 5

只在CSS上定义它，而不是在HTML上调用类

<view class="image-logoContainer">        
  <image class="image-logo"
     :source="imgLogo"
  />
  <text class="text-color-primary">To-List App</text>
</view>

.image-logoContainer{
  justify-content: center;
  align-items: center;
}

中心图像反应原生加载屏幕

5 个答案: