如何在headerLeft位置包含两个按钮？

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const CustomHeaderLeft = ({ navigation }) => {
  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={() => navigation.navigate('Screen1')}>
        <Text>Button 1</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('Screen2')}>
        <Text>Button 2</Text>
      </TouchableOpacity>
    </View>
  );
};

const App = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerLeft: ({ navigation }) => (
            <CustomHeaderLeft navigation={navigation} />
          ),
        }}
      />
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
  );
};

export default App;

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';

const CustomHeader = ({ navigation }) => {
  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={() => navigation.navigate('Screen1')}>
        <Text>Button 1</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('Screen2')}>
        <Text>Button 2</Text>
      </TouchableOpacity>
    </View>
  );
};

const App = () => {
  return (
    <Navigator
      initialRoute={{ name: 'Home' }}
      renderScene={(route, navigator) => {
        return (
          <View>
            <CustomHeader navigation={navigator} />
            {/* 其他内容 */}
          </View>
        );
      }}
    />
  );
};

export default App;