Question

我的组件层次结构为

<Component1>
  <Component2>
    <Component3>
      <Image
       ....
      >
    </Component3>
  </Component2>
<Component1>

Component1和Component2有一些高度。

现在如何以全屏显示图像，嵌套在3个具有一定高度的组件中，而不管其父组件的高度如何？

如果我将图像作为flex：1，它将在Component3的flexbox中自行调整，而我想以全屏显示图像。

目前我的图片样式是：

image: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },

并将调整大小模式设置为“覆盖”

其容器（Component3）样式：

container: {
        alignItems: 'center',
        justifyContent: 'center',
    },

Answer 1

    const styles = StyleSheet.create({
        bgImageWrapper: {
            position: 'absolute',
            top: 0, bottom: 0, left: 0, right: 0
        },
        bgImage: {
            flex: 1,
            resizeMode: "stretch"
        },
    });

<Component1>
  <Component2>
    <Component3>
      <View style={styles.bgImageWrapper}> 
        <Image style={styles.bgImage} />
      </View>
    </Component3>
  </Component2>
<Component1>

这个应该有用

React Native：在嵌套组件中全屏显示图像

1 个答案: