reactjs - 为什么我的 ImageBackground 不再延伸到屏幕底部？

Question

我已将 ImageBackground 包装在 ScrollView 中，但现在我的内容不再延伸到底部。仅供参考，ScrollView 一直到底部，但 Imagebackground 没有。如果没有 ScrollView，内容会一直到底部，而其下方没有任何空间。有谁知道为什么我的 ScrollView 阻止我的 ImageBackground 到达屏幕底部？我省略了与外部内容无关的样式。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {View, StyleSheet, Text, ImageBackground, TouchableOpacity, Image, ActivityIndicator, ScrollView} from 'react-native';
import Header from '../../components/Header/Header';
import Loader from "../../components/Login/Loader";
import {loadCustomerOrderDetails} from '../../actions/AppActions'
import {connect} from "react-redux";
import {Actions} from 'react-native-router-flux';
import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import selection from '../../selection';

const MBIcon = createIconSetFromIcoMoon(selection);

class Home extends Component {
    constructor(props) {
        super(props);
        this.props.dispatch(loadCustomerOrderDetails(this.props.customerId));
    }

    render() {
        const {isLoading, details} = this.props.customerData;
        const {invoices, unsubmittedOrders, itemIssues, deliveryStats} = details;
        let customerName = 'Select Account...';
        if (unsubmittedOrders && unsubmittedOrders.customerName) {
            customerName = unsubmittedOrders.customerName;
        }
        return (
            <View style={styles.wrapper}>
                <Header style={styles.header}/>
                <ScrollView style={{ flex: 1 }}>
                    <ImageBackground source={require('../../assets/loginBG.jpg')} style={styles.backgroundImage}>

                        <View>
                            <Image style={styles.mblogo} source={require('../../assets/mb_logo.png')} />
                        </View>

                        {isLoading &&
                            <ActivityIndicator
                                style={{alignSelf: 'center'}}
                                animating={true}
                                size='large'
                            />
                        }

                    </ImageBackground>
                </ScrollView>
            </View>
        );
    }
}

Home.propTypes = {
    customerData: PropTypes.object,
    customerId: PropTypes.string,
}

function mapStateToProps(state) {
    const {customerData, app} =  state;
    return {
        customerData: customerData,
        customerId: app.customerId
    };
}

export default connect(mapStateToProps)(Home);

var styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        backgroundColor: 'transparent',
        position: 'relative'
    },
    header: {
        height: 200,
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0
    },
    backgroundImage: {
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
        backgroundColor:'rgba(0,0,0,0.45)',
        width: null,
        height: '100%',
        marginTop: 55, 
        flex: 1, 
        position: 'relative', 
        bottom: 0
    },
    content: {
        flex: 1,
        justifyContent: 'space-between',
    },
    homeSection: {
        flex: 2,
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'center',
        width: '90%',
        margin: 'auto',
    },
    cartBtnContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginVertical: 8
    },
    footerBtn: {
        width: '45%',
        height: 48,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 24,
    }
});

标签： reactjsreact-native

Answer 1

放入：ScrollView_ImageBackground

<ImageBackground>
    <ScrollView>
    ......
    </ScrollView>
</ImageBackground>