如何将图像放在 React-Native 中水平居中的屏幕顶部？

Question

我正在尝试将图像放在屏幕顶部（顶部：0），但由于某种原因我无法实现。以下是我的缩短代码：

export default function App() {
  return (
    <View style={styles.container}>
      <StatusBar style="light" />

      <ImageBackground source={backgroundImage} style={styles.bgimage}>
        <View style={styles.banner}>
          <Image
            source={banner}
            style={{ width: 200, resizeMode: "contain" }}
          />
        </View>

        <View style={styles.loginForm}>
          <Text style={styles.heading}>WELCOME</Text>

          <View style={styles.section}>
            <Image source={user} style={styles.inputImage} />
            <TextInput
              style={styles.textInput}
              placeholder="Korisničko ime"
              underlineColorAndroid={"transparent"}
              placeholderTextColor="white"
            />
          </View>
          <View style={styles.section}>
            <Image source={password} style={styles.inputImage} />
            <TextInput
              style={styles.textInput}
              placeholder="Lozinka"
              underlineColorAndroid={"transparent"}
              placeholderTextColor="white"
            />
          </View>

          <TouchableOpacity style={styles.loginButton}>
            <Text style={{ color: "red" }}>LOGIN</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>
  );
}

下面是影响这些对象的样式：

container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  bgimage: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    resizeMode: "contain",
  },
  loginForm: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  banner: {
    position: "absolute",
    top: 0,
  }

发生在我身上的是，我的图像出现在最底部，在我的登录表单下方，但我想要它在上方，就在状态栏下方。

Answer 1

一个可能的解决方案是将容器设置为视口的全宽，将容器的 flex-direction 设置为列，然后在容器上使用以下内容：

align-items: center
justify-content: flex-start

Answer 2

{
 height: 100,   // height and width as per you content
 width: '90%',
 alignSelf: 'center',
 position: 'absolute', // If you want the position to be fixed at top
 top: 0,
}

如何将图像放在 React-Native 中水平居中的屏幕顶部？

How to put an Image to top of screen that is horizontally centered in React-Native?

react-native

expo