React Native：如何在Drawer Header中添加含可点击标题的自定义元素

核心实现思路 #

要实现移除默认标题、添加可点击标题及自定义元素，可通过 React Navigation 提供的 headerTitle、headerLeft/headerRight 属性替换默认头部元素，或直接用 header 属性完全自定义头部布局。

方案一：分步替换元素（适合简单需求） #

先修复你原有代码中 headerRight 的返回问题（箭头函数未返回组件），再分别自定义标题、左右侧元素：

// 定义可点击的标题组件
const CustomHeaderTitle = ({ onPress }) => (
  <TouchableOpacity onPress={onPress} activeOpacity={0.7}>
    <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>自定义标题</Text>
  </TouchableOpacity>
);

// 定义右侧自定义组件示例
const HeaderComponent = () => (
  <View style={{ flexDirection: 'row', gap: 15, marginRight: 15 }}>
    <TouchableOpacity onPress={() => console.log('搜索按钮点击')}>
      <Ionicons name="search" size={24} color="#fff" />
    </TouchableOpacity>
    <TouchableOpacity onPress={() => console.log('通知按钮点击')}>
      <Ionicons name="notifications" size={24} color="#fff" />
    </TouchableOpacity>
  </View>
);

// 修改后的 Drawer.Navigator
<Drawer.Navigator
  drawerContent={props => <CustomDrawer {...props} />}
  screenOptions={{
    headerStyle: { backgroundColor: '#6A994E' },
    headerTintColor: '#fff',
    drawerLabelStyle: { marginLeft: -25, fontSize: 15 },
    drawerActiveBackgroundColor: '#6A994E',
    drawerActiveTintColor: '#fff',
    // 替换默认标题为可点击组件
    headerTitle: () => <CustomHeaderTitle onPress={() => console.log('标题被点击')} />,
    // 左侧添加抽屉切换按钮
    headerLeft: (props) => (
      <TouchableOpacity 
        onPress={() => props.navigation.toggleDrawer()} 
        style={{ marginLeft: 15 }}
      >
        <Ionicons name="menu" size={24} color="#fff" />
      </TouchableOpacity>
    ),
    // 修复右侧组件的返回问题
    headerRight: () => <HeaderComponent />
  }}
>
  <Drawer.Screen name='Sales' component={SalesScreen} options={{ drawerIcon: SalesIcon}} />
  <Drawer.Screen name='Inventory' component={InventoryScreen} options={{ drawerIcon: InventoryIcon }} />
</Drawer.Navigator>

方案二：完全自定义头部（适合复杂布局） #

如果需要更灵活的布局调整，直接使用 header 属性自定义整个头部容器：

<Drawer.Navigator
  drawerContent={props => <CustomDrawer {...props} />}
  screenOptions={{
    drawerLabelStyle: { marginLeft: -25, fontSize: 15 },
    drawerActiveBackgroundColor: '#6A994E',
    drawerActiveTintColor: '#fff',
    // 完全自定义头部
    header: (props) => (
      <View style={{ 
        backgroundColor: '#6A994E', 
        height: 60, 
        flexDirection: 'row', 
        alignItems: 'center', 
        justifyContent: 'space-between', 
        paddingHorizontal: 15 
      }}>
        {/* 左侧抽屉按钮 */}
        <TouchableOpacity onPress={() => props.navigation.toggleDrawer()}>
          <Ionicons name="menu" size={24} color="#fff" />
        </TouchableOpacity>
        {/* 中间可点击标题 */}
        <TouchableOpacity onPress={() => console.log('标题点击')}>
          <Text style={{ color: '#fff', fontSize: 18, fontWeight: 'bold' }}>自定义标题</Text>
        </TouchableOpacity>
        {/* 右侧自定义元素组 */}
        <View style={{ flexDirection: 'row', gap: 15 }}>
          <TouchableOpacity onPress={() => console.log('搜索按钮')}>
            <Ionicons name="search" size={24} color="#fff" />
          </TouchableOpacity>
          <TouchableOpacity onPress={() => console.log('通知按钮')}>
            <Ionicons name="notifications" size={24} color="#fff" />
          </TouchableOpacity>
        </View>
      </View>
    )
  }}
>
  <Drawer.Screen name='Sales' component={SalesScreen} options={{ drawerIcon: SalesIcon}} />
  <Drawer.Screen name='Inventory' component={InventoryScreen} options={{ drawerIcon: InventoryIcon }} />
</Drawer.Navigator>

关键说明 #

• 使用 headerLeft/headerRight 时，确保箭头函数正确返回组件（去掉大括号或显式写 return）；
• 自定义组件中可通过 props.navigation 调用导航方法（如切换抽屉）；
• 示例中使用了 react-native-vector-icons/Ionicons，需提前安装该依赖，或替换为你项目中的图标组件。

内容的提问来源于stack exchange，提问作者user19574730