Expo Router中headerRight的TouchableOpacity点击异常求助

针对你遇到的headerRight里TouchableOpacity仅首次点击有效、后续无响应的问题，结合Expo SDK 52和expo-router 4.0.2的环境，提供几个可靠的排查和解决方向：

1. 替换TouchableOpacity为Pressable或Expo Button #

TouchableOpacity在React Navigation的header容器中偶尔会出现交互失效的情况，尝试改用React Native的Pressable组件或者Expo提供的Button组件，这两个组件在header环境下的交互稳定性更好：

用Pressable实现： #

// 在RootLayout的Stack.Screen中
<Stack.Screen
  name="notes/index"
  options={{
    title: "Dodo",
    headerRight: () => (
      <Pressable onPress={() => console.log("Button pressed!")} style={{padding: 8}}>
        <Text>Click Me</Text>
      </Pressable>
    ),
  }}
/>

用Expo Button实现： #

<Stack.Screen
  name="notes/index"
  options={{
    title: "Dodo",
    headerRight: () => (
      <Button title="Click Me" onPress={() => console.log("Button pressed!")} />
    ),
  }}
/>

2. 给TouchableOpacity添加明确的点击区域样式 #

很多时候是因为TouchableOpacity没有设置足够的padding或尺寸，导致实际可点击区域过小或被header容器截断，添加明确的样式确保交互区域完整：

<TouchableOpacity 
  onPress={() => console.log("Button pressed!")}
  style={{ 
    paddingHorizontal: 16, 
    paddingVertical: 8,
    zIndex: 100 // 确保按钮在header层级最上层
  }}
>
  <Text>Click Me</Text>
</TouchableOpacity>

3. 用useCallback包裹headerRight组件 #

如果是页面重新渲染导致headerRight组件频繁重建，可能会干扰点击事件绑定，用useCallback包裹headerRight的返回组件，避免不必要的重渲染：

// 在notes/index.tsx中
import { useCallback, useLayoutEffect } from 'react';
import { useNavigation } from 'expo-router';

export default function NotesIndex() {
  const navigation = useNavigation();

  const renderHeaderRight = useCallback(() => (
    <TouchableOpacity onPress={() => console.log("Pressed!")} style={{padding: 8}}>
      <Text>Click Me</Text>
    </TouchableOpacity>
  ), []);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: renderHeaderRight,
    });
  }, [navigation, renderHeaderRight]);

  return (
    // 页面内容
  );
}

4. 检查是否有自定义Header组件干扰 #

如果你的RootLayout中使用了自定义的header组件（比如通过header属性替换默认header），需要确保自定义header没有拦截点击事件，或者给headerRight的按钮留出足够的交互空间，避免被其他元素覆盖。

已知情况说明 #

在expo-router 4.x和React Navigation 6.x的组合中，确实有部分开发者反馈过TouchableOpacity在headerRight中的交互异常问题，大多是由于header容器的渲染机制和TouchableOpacity的动画触发逻辑冲突导致的，改用Pressable或添加明确样式是最常见的解决办法。

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