使用 createBottomTabNavigator 的 headerBar

createBottomTabNavigator 是一个 React Native 中的导航器组件，它能够方便的创建一个带有底部标签的导航界面。而 headerBar 则是一个自定义组件，它可以被嵌入到 createBottomTabNavigator 中，以实现更丰富多样的导航和界面布局。

下面是一个使用 createBottomTabNavigator 和 headerBar 的示例代码:

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

// 引入自定义的 HeaderBar 组件
import HeaderBar from './HeaderBar';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'blue',
        inactiveTintColor: 'gray',
      }}
      // 在此处嵌入自定义的 HeaderBar 组件
      header={props => <HeaderBar {...props} />}
    >
      {/* 在此处添加其他导航界面 */}
    </Tab.Navigator>
  );
}

在上面的示例代码中，我们首先通过 import 引入了自定义的 HeaderBar 组件。然后我们创建了一个 Tab.Navigator 组件，并通过 tabBarOptions 配置了标签栏的样式。最后我们在 header 属性中嵌入了 HeaderBar 组件。

接下来我们来看一下 HeaderBar 组件的实现。

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

export default function HeaderBar(props) {
  const navigation = useNavigation();

  // 在此处定义 headerBar 样式
  const styles = StyleSheet.create({
    container: {
      height: 64,
      paddingTop: 20,
      paddingHorizontal: 16,
      backgroundColor: '#F5F5F5',
      flexDirection: 'row',
      alignItems: 'center',
    },
    title: {
      fontSize: 18,
      fontWeight: 'bold',
      color: '#000000',
      flex: 1,
      textAlign: 'center',
    },
    buttonContainer: {
      width: 44,
      height: 44,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

  // 在此处定义点击返回按钮的回调函数
  const handleBackPress = () => {
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      {/* 左侧返回按钮 */}
      <TouchableOpacity
        style={styles.buttonContainer}
        onPress={handleBackPress}
      >
        <Text>返回</Text>
      </TouchableOpacity>
      {/* 中间标题 */}
      <Text style={styles.title}>{props.scene.descriptor.options.title}</Text>
      {/* 右侧菜单按钮 */}
      <TouchableOpacity style={styles.buttonContainer}>
        <Text>菜单</Text>
      </TouchableOpacity>
    </View>
  );
}

在上面的代码中，我们首先通过 useNavigation 钩子获取了当前的导航对象，然后定义了一个样式对象 styles，用来设置 HeaderBar 的样式。接着我们定义了一个回调函数 handleBackPress，用来响应左侧返回按钮的点击事件。

最后，我们在 return 语句中返回了一个包含左侧返回按钮、中间标题、右侧菜单按钮的 View 组件。在 View 组件中，我们使用了 TouchableOpacity 组件来包装左侧返回按钮和右侧菜单按钮，以实现按下按钮后的点击效果。

总之，使用 createBottomTabNavigator 和 headerBar 可以轻松实现丰富多样的导航和界面布局，同时也能提高应用的用户体验和美观程度。