如何在React Native Drawer导航的头部添加可点击图标

方法一：直接在Drawer.Screen的options中配置 #

你可以直接在目标页面的Drawer.Screen配置里，通过headerRight属性添加可点击图标，写法和Stack导航完全通用：

修改app.js中的MetalDetector Screen配置：

<Drawer.Screen 
  name="MetalDetector" 
  component={Home} 
  options={({ navigation }) => ({
    drawerLabel: '🔦 MetalDetector',
    // 配置头部右侧可点击图标
    headerRight: () => (
      <TouchableOpacity 
        style={{ marginRight: 15 }}
        onPress={() => {
          // 写入点击图标后的逻辑，比如播放/暂停音频
          console.log('音频图标被触发');
        }}
      >
        {/* 替换成你的音频图标组件，这里以react-native-vector-icons为例 */}
        <Icon name="volume-high" size={24} color="#ffffff" />
      </TouchableOpacity>
    )
  })} 
/>

方法二：在页面组件内动态配置 #

如果需要在Home组件内控制图标的显示状态或点击逻辑，可以用useNavigation钩子动态设置头部选项：

在home.js中修改：

import { View, TouchableOpacity, useEffect } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons'; // 根据你使用的图标库调整

function Home() {
  const navigation = useNavigation();

  useEffect(() => {
    // 动态设置头部右侧图标
    navigation.setOptions({
      headerRight: () => (
        <TouchableOpacity 
          style={{ marginRight: 15 }}
          onPress={handleAudioClick}
        >
          <Icon name="volume-high" size={24} color="#ffffff" />
        </TouchableOpacity>
      )
    });
  }, []);

  // 点击图标后的处理逻辑
  const handleAudioClick = () => {
    // 这里写你的音频相关操作
    console.log('处理音频操作');
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        // 你的原有代码
      </View>
    </View>
  );
}

补充说明 #

• 若使用本地图片作为图标，替换<Icon>为<Image>组件即可：

  <Image 
    source={require('./assets/audio-icon.png')} 
    style={{ width: 24, height: 24 }} 
  />
  

• 全局配置：如果所有页面都需要同类头部图标，可将headerRight配置到Drawer.Navigator的screenOptions中，所有子页面会自动继承该配置。

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