在 React Native 中调整图像大小

Question

我希望我的屏幕看起来像 但我得到 经过各种尝试。

这是我的代码：-

<ImageBackground 
      style={styles.imageBackground}
      source={constants.image.bg_splash}
    >

风格：-

 imageBackground: {
 // flex: 1,
  justifyContent: 'center',
   alignItems: 'center',
  //  width:'90%',
  //  //height:constants.DesignHeight-300,
  //  height:'100%',
  // marginVertical:40,
   resizeMode:'contain',
  // borderWidth:1,
  // borderColor:'black',
  position: 'absolute',
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
 },

注释代码是我尝试过的各种组合的部分。

谢谢！！！

Answer 1

可能，您的背景是灰色形状，并且您希望这个白色垂直填充不属于您的灰色形状图像的一部分。 为此，您可以通过以下方式包装您的组件：

// https://reactnative.dev/docs/safeareaview

<SafeAreaView>
  <View style={styles.container}>
    <ImageBackground 
      style={styles.imageBackground}
      source={constants.image.bg_splash}
  </View>
</SafeAreaView>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: relative,
    paddingVertical: 40,
  },
  imageBackground: {
    // https://reactnative.dev/docs/stylesheet#absolutefillobject
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Answer 2

您不需要 position ImageBackground 作为绝对值。 给它一个宽度和高度的设备和 resizeMode: 包含。

imageBackground: {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  resizeMode: 'contain',
}