React native v5，跨所有屏幕的通用抽屉式导航

Question

我的应用程序中现在有2个屏幕。我已经安装了drawer navigation并在Home Screen上实现了，但是我必须将标题样式和图标复制到所有屏幕上，如何才能使其global。

App.js

 /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
// import Icon from 'react-native-vector-icons/Ionicons';
import Icon from 'react-native-vector-icons/FontAwesome';

import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Button,
StatusBar,
} from 'react-native';

import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const HomeStack = createStackNavigator();
const DetailsStack = createStackNavigator();
const Drawer = createDrawerNavigator();

const HomeScreen = ({ navigation }) => {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={styles.footer}>Home Screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
            <Icon name='bars' />
        </View>
    )
};

const DetailsScreen = () => {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text style={styles.footer}>Detail Screen</Text>
        </View>
    )
};

const HomeStackScreen = ({ navigation }) => {
    return (
        <HomeStack.Navigator 
            screenOptions = {{
                headerStyle: {
                    backgroundColor: '#6024bf'
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                },
                headerTitleAlign: 'center',
                safeAreaInsets: {
                    left: 10,
                    right: 10
                },
                headerLeft: () => (
                    <Icon name='bars' onPress={() => navigation.openDrawer()} 
                        color='#fff'
                        size={25}
                    />
                ),
            }}
        >
            <HomeStack.Screen name="Home" component={HomeScreen} options = {{
                title:"Overview"
            }}
            />
        </HomeStack.Navigator>
    )
}

const DetailsStackScreen = ({ navigation }) => {
    return (
        <DetailsStack.Navigator 
            screenOptions = {{
                headerStyle: {
                    backgroundColor: '#6024bf'
                },
                headerTintColor: '#fff',
                headerTitleStyle: {
                    fontWeight: 'bold'
                }
            }}
        >
            <DetailsStack.Screen name="Details" component={DetailsScreen} />
        </DetailsStack.Navigator>
    )
}



const App = () => {
    return (
        <NavigationContainer>
            {/* <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
                <Stack.Screen name="Details" component={DetailsScreen} />
            </Stack.Navigator> */}

            <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeStackScreen} />
                <Drawer.Screen name="Details" component={DetailsStackScreen} />
            </Drawer.Navigator>
        </NavigationContainer>
    )
}

const styles = StyleSheet.create({
scrollView: {
    backgroundColor: Colors.lighter,
},
engine: {
    position: 'absolute',
    right: 0,
},
body: {
    backgroundColor: Colors.white,
},
sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
},
sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
},
sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
},
highlight: {
    fontWeight: '700',
},
footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
},
});

export default App;