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

import { SafeAreaView } from 'react-native';

// ...

return (
  <SafeAreaView style={{ flex: 1 }}>
    <ScrollView>
      {/* 滚动视图的内容 */}
    </ScrollView>
    {/* BottomTabNavigator */}
  </SafeAreaView>
);

import { StyleSheet, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    position: 'relative',
  },
  scrollView: {
    marginBottom: 50, // 底部导航栏的高度
  },
  tabNavigator: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    height: 50, // 底部导航栏的高度
  },
});

// ...

return (
  <View style={styles.container}>
    <ScrollView contentContainerStyle={styles.scrollView}>
      {/* 滚动视图的内容 */}
    </ScrollView>
    <View style={styles.tabNavigator}>
      {/* BottomTabNavigator */}
    </View>
  </View>
);

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

// ...

return (
  <Tab.Navigator
    tabBarOptions={{
      position: 'bottom',
    }}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    {/* 其他底部导航栏选项 */}
  </Tab.Navigator>
);