为什么我的ImageBackground视图在React Native中延伸到屏幕底部？

Question

我的ImageBackground只会扩展到它的内部内容，即使它的父级一直到达屏幕的底部。如何让我的ImageBackground视图完全扩展到其父视图的底部？

<View style={styles.container}>
    <View>
        <Text style={styles.closeContainer} onPress={() => this.closeSideBar()}>
            <MBIcon name='ico-24-chevron-left' style={styles.closeIcon} />
            CLOSE
        </Text>
    </View>
    <ScrollView style={styles.contentContainer}>
        <View style={styles.userContainer}>
            <Text style={styles.userName}>{username}</Text>
        </View>
        <ImageBackground source={require('../../assets/drawer-bg.png')} style={styles.imageBackgroundView} imageStyle={styles.imageBackground}>
            <TouchableOpacity onPress={() => Actions.home()}>
                <View>
                    <Text style={styles.links}>Home</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.performNetworkAction(Actions.orders, {orderStatus: 'notDelivered'})}>
                <View>
                    <Text style={styles.links}>Scheduled Deliveries</Text>
                </View>
            </TouchableOpacity>                                      
        </ImageBackground>
    </ScrollView>
</View>

的CSS：

container: {
    backgroundColor: '#262626',
    height:'100%',
    width:'100%',
    display: 'flex'
},
contentContainer: {
    height: '100%', 
    flex: 3,
    backgroundColor: '#262626',
    position: 'relative',
    borderColor: 'green',
    borderStyle: 'solid',
    borderWidth: 2
},
imageBackgroundView: {
    width: '100%',
    borderColor: 'yellow',
    borderStyle: 'solid',
    borderWidth: 2,
    position: 'relative',
    flex: 1
},
imageBackground: {
    height: '100%'
},

我概述了我的ImageBackground视图及其父容器：

Answer 1

在scrollView中，“样式”不起作用，而是使用“contentContainerStyle” 所以这段代码

<ScrollView style={styles.contentContainer}>

将成为

<ScrollView contentContainerStyle={styles.contentContainer}>

并在imageBackgroundView中添加height ='100％'

Answer 2

看起来你对flexbox的理解有点偏差。设置flex: 1会导致视图展开以填充其父flexDirection方向的空间，默认情况下为'column'（垂直）。如果父级只有1个具有flex: 1的子视图，则子视图将扩展到整个空间。如果2个子视图有flex: 1，则它们都会填充一半的空间。子视图的扩展取决于其父级flexDirection和子视图的弹性值。

在flex: 1中设置imageBackgroundView会使其展开以填充内容容器。