ScrollView溢出到另一个组件

Question

所以在调整由页眉，内容和页脚组成的布局时遇到了这个问题
这是代码：

export default class Homes extends React.Component{
    constructor(state){
        super(state)
        this.state = {
            active : 'home'
        }
    }

    render(){
        return (
           <View style={{flex: 1, flexDirection : 'column', justifyContent : 'space-between'}}>
                <Container>
                        <FlatHeader 
                        centerContent={
                            <Text style={{fontSize : 20}}>Stationary</Text>
                        }
                        style={{
                            backgroundColor : '#3273a8'
                        }}
                        />
                            <Pager page={this.state.active} style={{paddingTop : 10}}/>

                        <View style={styles.container}>
                            <BottomNavigation active={this.state.active} hidden={false} style={{ container : {paddingLeft : 5, paddingRight : 5} }}>
                                    <BottomNavigation.Action
                                        key="ewallet"
                                        icon={<Icon name="dollar" size={20}/>}
                                        label="E-Wallet"
                                        onPress={() => this.setState({ active: 'ewallet' })}
                                    />
                                    <BottomNavigation.Action
                                        key="shop"
                                        icon={<Icon name="shopping-cart" size={20}/>}
                                        label="E-Shopping"
                                        onPress={() => this.setState({ active: 'shop' })}
                                    />
                                    <BottomNavigation.Action
                                        key="home"
                                        icon={<Icon name="home" size={20}/>}
                                        label="Home"
                                        onPress={() => this.setState({ active: 'home' })}
                                    />
                                    <BottomNavigation.Action
                                        key="printing"
                                        icon={<Icon name="print" size={20}/>}
                                        label="Printing"
                                        onPress={() => this.setState({ active: 'printing' })}
                                    />
                                    <BottomNavigation.Action
                                        key="setting"
                                        icon={<Icon name="gear" size={20}/>}
                                        label="Settings"
                                        onPress={() => this.setState({ active: 'setting' })}
                                    />
                                </BottomNavigation>
                        </View>

                      </Container>
           </View>


        )
    }  
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    paddingTop : 1
  }
})

例如，我用虚拟东西填充内容

export default class EStore extends Component{
    constructor(state){
        super(state)
    }

    render(){
        return(
<View>
            <ScrollView>
              ...
            </ScrollView>
</View>
        )
    }
}

但是，它不会滚动到底部。取而代之的是，我添加了一些代码，以使其按照下面的代码在页眉和页脚之间滚动：

export default class EStore extends Component{
    constructor(state){
        super(state)
    }

    render(){
        return(
            <ScrollView style={{flexGrow : 1}}>
              ...
            </ScrollView>
        )
    }
}

突然，布局本身（尤其是页脚）被内容溢出 我该如何解决这个问题？