在React Native(Expo)中用expo-router的Stack.Screen配置动态头部是否安全？

当前实现是否安全？ #

你的实现是安全的。在expo-router中，允许在页面组件内部嵌套<Stack.Screen>来配置当前页面的导航选项（比如headerRight、title等），这是官方推荐的「屏幕级导航配置」方式。由于React组件要求返回单个根元素，用React Fragment(<>)包裹<Stack.Screen>和页面内容是完全合理的，不需要component或children属性——因为页面本身就是当前栈屏幕的内容，<Stack.Screen>仅负责注入导航配置。

更优解决方案（针对重渲染卡顿问题） #

你之前用全局状态导致卡顿，核心原因是全局状态更新会触发所有依赖该状态的组件（包括根布局_layout）重渲染，而页面级的筛选状态完全不需要全局共享。当前用页面内useState的思路是对的，在此基础上可以通过以下优化进一步减少不必要的重渲染：

1. 用useCallback缓存headerRight回调 #

每次filter更新时，当前代码会重新创建一个新的headerRight函数，导致导航栏组件频繁重渲染。用useCallback缓存这个函数，只有当filter变化时才重新生成：

import { useCallback } from 'react';

export default function Home() {
  const [filter, setFilter] = useState('');

  // 缓存headerRight回调
  const headerRight = useCallback(() => (
    <HeaderRight text={filter} />
  ), [filter]); // 依赖项仅为filter

  return (
    <>
      <Stack.Screen
        options={{
          headerRight: headerRight
        }}
      />
      {/* 页面内容 */}
      <SafeAreaView>
        <SearchInput input={filter} onChangeInput={setFilter} />
        <FlatList
          data={someData}
          renderItem={(item) => <Card city={item.item} />}
          keyExtractor={(item) => item.id}
        />
      </SafeAreaView>
    </>
  );
}

2. 用React.memo包裹HeaderRight组件 #

如果HeaderRight内部没有复杂逻辑，可以用React.memo包裹，让它仅在text属性变化时才重渲染：

import { memo } from 'react';

const HeaderRight = memo(({ text }) => {
  // 你的HeaderRight组件内容
});

export default HeaderRight;

3. 坚持使用页面局部状态 #

筛选状态是页面级的局部状态，完全不需要放到全局状态中。用页面内的useState管理，只会触发当前页面和关联的导航组件重渲染，不会影响应用其他部分，从根源上避免全局重渲染导致的卡顿。

总结 #

你的核心思路是正确的，当前实现安全且符合expo-router的设计规范。通过缓存回调和组件memo化，可以进一步优化性能，避免不必要的重渲染；而使用页面局部状态替代全局状态，是解决之前卡顿问题的关键。

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