ReactNative：如何使背景图像填满应由flexbox覆盖的部分

Question

I've been trying to get an image to fill up the space it should fill with flex. However, it only fills up to a certain portion of the space. The structure is as follows:

• mainWrapper
  • navBarWrapper
  • image
  • buttonWrapper

mainWrapper is a View with flex: 1 so it covers the entire page. navBarWrapper has a flex: 1 image has a flex: 7 and backgroundColor: 'pink' to see where it ends buttonWrapper has a flex: 2.5 and backgroundColor: 'lightgrey' to see where it ends

In the screenshot, the image itself doesn't fill up the pink space entirely.

Screenshot

My simplified code is here:

  <View style={styles.mainWrapper}>
    <View style={styles.navBarWrapper}>
      <NavigationBar
        statusBar={this.statusBarConfig()}
        leftButton={this.leftButtonConfig()}
        title={this.titleConfig()}
        style={styles.navBar}>
      </NavigationBar>
    </View>

    <View style={styles.imageWrapper}>
      <Image source={require('../assets/images/user_screen/user_screen_background.png')} style={styles.image}>
      </Image>
    </View>

    <View style={styles.buttonWrapper}>
    </View>

  </View>

And the stylesheet

mainWrapper:{
 flex: 1,
 flexDirection: 'column',
 justifyContent: 'flex-start',
 backgroundColor: 'white'
},
navBarWrapper:{
 flex: 1,
},
navBar:{
 flexDirection: 'row',
 alignItems: 'center',
 backgroundColor: "#1ca99e",
},
imageWrapper:{
 flex: 7,
 flexDirection: 'column',
 backgroundColor: 'pink',
},
image:{
 flex:1 ,
 height: null,
 width: null,
 resizeMode: 'cover'
},
buttonWrapper:{
 flex: 2.5,
 flexDirection: 'row',
 backgroundColor: 'lightgrey'
}

Answer 1

Give subcontainers flex values with respect to wrapping container. Since by default flexDirection is column when you give flex 1 outer container it will take up full height of the screen.

Assuming you need top 10% for navbar, bottom button container 25% of screen height, that gives us 65% of height for the imageWrapper.

mainWrapper:{
 flex: 1,
 flexDirection: 'column',
 justifyContent: 'flex-start',
 backgroundColor: 'white'
},
navBarWrapper:{
 flex: 0.1,
},
navBar:{
 flexDirection: 'row',
 alignItems: 'center',
 backgroundColor: "#1ca99e",
},
imageWrapper:{
 flex: 0.65,
 flexDirection: 'column',
 backgroundColor: 'pink',
},
image:{
 flex:1 ,
 height: null,
 width: null,
 resizeMode: 'cover'
},
buttonWrapper:{
 flex: 0.25,
 flexDirection: 'row',
 backgroundColor: 'lightgrey'
}