您需要为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以使其垂直居中。

视图容器的样式应为

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

高度确保它跨越整个页面，从而使图像成为垂直和水平对齐。
对于图像大小，我认为使用百分比而不是定义明确的宽度/高度将达到目的。

在视图中设置：

justifycontent:center

在儿童：

alignself:center

执行任务。

在父视图中设置：

justifycontent:center

在Child Set中：

alignself:center

* 如何使图像居中并具有正确的大小？*

在React Native中使用Flexbox的The documentation告诉我们为什么你的尝试失败了。

调整内容

justifyContent描述了如何在容器的主轴内对齐 children
（对于React Native，默认为 column-wise）。

对齐项目

alignItems描述了如何将 children 沿着其容器的横轴对齐。
因此，在<Image />元素上设置alignItems和justifyContent会影响图像的 * 子元素 * 的位置。
但在您的例子中，<Image />没有任何子节点，因此效果为零。

如何让代码按预期工作

要对图像进行样式化，我们需要为图像的 parent 设置alignItems和justifyContent，在您的示例中是<View />元素。
假设<View />的样式是container（<Image />是logo），下面的样式表设置将使图像在两个方向上居中。1

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

const logoImage = { uri: 'https://i.stack.imgur.com/15jTl.png' };

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。
如果图像应该居中，而图像下方的文本应该左对齐，则此方法很方便。
考虑下面的例子。
在纵向模式下，所有内容都适合屏幕，并在水平和垂直方向居中。
在横向模式下，图像+文本不适合垂直。滚动到顶部时应显示整个图像，而滚动到底部时应显示所有文本。2

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

const logoImage = { uri: 'https://i.stack.imgur.com/15jTl.png' };

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

1 flex: 1子句使container跨越整个屏幕高度，而不仅仅是图像高度。
2复制：download并解压缩到您选择的某个目录。
切换到该目录并运行npm install，然后运行npm start。
(You还需要一个模拟器或物理设备来运行应用程序。）