React Bottom Tab Navigation：修改页面标题不影响标签栏标题

在React Navigation中，title属性会同时作用于Tab栏标签和页面Header标题，要实现只改Header标题不影响Tab栏，你需要单独设置Header的标题内容，而非修改全局的title：

方式一：在页面组件中动态设置headerTitle #

把你原来修改title的代码改成修改headerTitle，这样只会影响页面顶部的Header，Tab栏的标题会保持Tab.Screen中设置的"Lists"不变：

const [Title, setTitle] = useState("noLists");

useEffect(() => {
  // 用headerTitle替代title
  navigation.setOptions({ headerTitle: Title });
}, [Title, navigation]); // 依赖项包含Title和navigation，确保状态更新时同步修改

方式二：在Tab导航器中固定Tab标题，Header标题由页面控制 #

你的Tab.Screen配置不需要改动，其中的title: "Lists"会始终作为Tab栏的显示标题。如果需要更复杂的Header标题（比如自定义组件），也可以在Tab.Screen的options中把headerTitle设为动态值，不过方式一更适配你的场景：

<Tab.Screen
  name="Lists"
  component={Lists}
  options={{
    title: "Lists", // 这个是Tab栏固定显示的标题
    headerShown: true,
    // 其他原有配置保持不变...
  }}
/>

这样操作后，你动态修改headerTitle时，Tab栏的"Lists"标题不会受到任何影响，只有页面顶部的Header标题会跟着变化。

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