如何使用react本机堆栈导航器和选项卡导航器设置公共页眉和页脚

npm install @react-navigation/native

npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs

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

const HeaderFooter = ({ title }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
};

const styles = {
  container: {
    backgroundColor: '#f2f2f2',
    padding: 10,
    alignItems: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
};

export default HeaderFooter;

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HeaderFooter from './HeaderFooter';
import HomeScreen from './HomeScreen';
import DetailsScreen from './DetailsScreen';

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator
      screenOptions={{
        header: () => <HeaderFooter title="页眉" />,
        footer: () => <HeaderFooter title="页脚" />,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
};

export default StackNavigator;

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import StackNavigator from './StackNavigator';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={StackNavigator} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

export default TabNavigator;