reactjs - 为什么我的 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 视图及其父容器：

标签： reactjsreact-native

Answer 1

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

<ScrollView style={styles.contentContainer}>

会变成

<ScrollView contentContainerStyle={styles.contentContainer}>

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