在 ImageBackground 中反应原生中心图像

时间:2021-03-15 14:38:33

标签: react-native

react-native 如何在 ImageBackground 上居中图像

我有这样的简单代码

<View style={styles.container}>
  <ImageBackground source={require('../../../public/images/sss.png')} style={styles.image}>
  <Image 
      style={styles.logoStyle}
      source={require('./../../../public/images/logo1.png')}
      />
  </ImageBackground>
</View>

const styles = StyleSheet.create({

  container: {
    flex: 1,
    flexDirection: "column",
  },
  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center"
  },

  logoStyle: {
    justifyContent: 'center',
    alignItems: 'center',
  },
});

问题是我的图像位于 ImageBackground 中,显示在屏幕左侧,我需要将其居中

1 个答案:

答案 0 :(得分:0)

将 ImageBackground 内的图像与中心对齐,如下所示。

  image: {
    flex: 1,
    resizeMode: "cover",
    justifyContent: "center",
    alignItems: 'center',
  }