如何在React Native中居中图片

Question

背景

我有一张图片，用于在加载其他内容时显示。
我希望它能够居中并在所有设备上看起来一样。

问题

目前，图片显示在左上角。
我希望它能够水平和垂直居中。

问题

如何使图片居中并具有正确的尺寸？

---

我的图片高度为776像素，宽度为600像素。 我知道我需要在样式表中设置图片尺寸。 据我所知，我可以使用JSX来实现这一点。

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

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

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

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

export default LoadingScreen;

- wuno

Answer 1

您需要设置 <View> 元素的 justifyContent 和 alignItems 样式属性，以实现将 <Image> 元素居中显示。

应该像这样：

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使其垂直居中。

- Akbar Rachman Gifari II

Answer 2

视图容器的样式应为

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

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

对于图像大小，我认为使用百分比将起到作用，而不是定义确定的宽度/高度。

- justelouise

---

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

Answer 3

设置视图：

justifycontent:center

在子组件中：

alignself:center

并在任务中执行。

- user13504866

Answer 4

在父视图中设置：

justifycontent:center

并在子集中：

alignself:center

- user13868738

Answer 5

如何使图像居中并具有正确的大小的解决方案是什么？

在使用React Native中的Flexbox的文档中，我们可以了解到为什么您的尝试失败了。

"justifyContent"描述了如何在容器的主轴上对齐"children"（在React Native中默认为纵向）。

"alignItems"描述了如何沿容器的交叉轴对齐"children"。

因此，在<Image />元素上设置alignItems和justifyContent会影响图像的子元素的位置。
但在你的情况下，<Image />没有任何子元素，所以效果是零。

如何使你的代码按预期工作

要为图像设置样式，我们需要为图像的父元素设置alignItems和justifyContent，在你的情况下，父元素是<View />元素。
假设<View />的样式是container（<Image />的样式是logo），以下样式设置将使图像在两个方向上居中。¹

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

const logoImage = { uri: 'https://istack.dev59.com/15jTl.webp' };

export default function LoadingScreen() {
  return (
    <View style={styles.container}>
      <Image style={styles.logo} source={logoImage} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 280,
    height: 260,
  },
});

另一种解决方案

自我对齐

alignSelf与alignItems具有相同的选项和效果，但不是影响容器内的子元素，而是可以将此属性应用于单个元素。

只需在图像本身上设置alignSelf，而不是在其父元素上设置alignItems。

如果图像应该居中，而图像下方有应该左对齐的文本，则此方法非常方便。

请考虑下面的示例。
在纵向模式下，所有内容都适合屏幕，并且在水平和垂直方向上居中。
在横向模式下，图像+文本无法在垂直方向上适应。 当向顶部滚动时，应显示整个图像，而当向底部滚动时，应显示所有文本。²

import React from 'react';
import { Image, ScrollView, StyleSheet, Text, View } from 'react-native';

const logoImage = { uri: 'https://istack.dev59.com/15jTl.webp' };

export default function LoadingScreen() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollView}>
        <Image style={styles.logo} source={logoImage} />
        <Text>Here are some</Text>
        <Text>lines of text</Text>
        <Text>below the image.</Text>
        <Text> - - -</Text>
        <Text>I want the image</Text>
        <Text>to be centered,</Text>
        <Text>but this text</Text>
        <Text>to be left-aligned,</Text>
        <Text>not centered.</Text>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 8 },
  scrollView: { flexGrow: 1, justifyContent: 'center' },
  logo: { alignSelf: 'center', width: 280, height: 260 },
});

---

¹ flex: 1这个语句使得container占据整个屏幕高度，而不仅仅是图片的高度。

² 要复现：下载并解压到您选择的某个目录中。
切换到该目录并运行npm install，然后运行npm start。
（您还需要一个模拟器或实体设备来运行应用程序。）

- Henke

---

我的回答也涵盖了在使用ScrollView时进行垂直居中的问题。 - undefined