如何使BottomTabNavigator不覆盖滚动视图？

Question

如何使滚动视图适合屏幕？

        return(
                    <ScrollView scrollEnabled contentContainerStyle = {{marginBottom: 'auto'}}>
                        {this.state.bills.map(bill => {
                            return(
                                <Bill bill = {bill} key = {bill.id} />
                            )
                        })}
                    </ScrollView>

Answer 1

使用{flex：1}在视图内覆盖滚动视图， 这对我的应用程序有帮助

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.main}>
        <ScrollView scrollEnabled contentContainerStyle = {{marginBottom: 'auto'}}>
                        {this.state.bills.map(bill => {
                            return(
                                <Bill bill = {bill} key = {bill.id} />
                            )
                        })}
                    </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main: {
   flex: 1   
  }
});

Answer 2

使用SafeAreaView包裹滚动视图，如下所示：

<SafeAreaView style={{flex:1}}>
  <ScrollView ...>...</ScrollView>
</SafeAreaView>