如何为反应导航 v5 设置标题选项？答案

【问题标题】：How to set header options for react navigation v5?如何为反应导航 v5 设置标题选项？
【发布时间】：2020-05-05 10:56:35
【问题描述】：

伙计们我想用

配置标题

static navigationOptions = ({ navigation  }) => {

}

我使用反应导航 v5 告诉我，我理解正确，现在可以仅使用 Stack.Screen 中的选项来获取标题设置？示例：

<Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'My home',
          headerStyle: {
            backgroundColor: '#f4511e',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}
      />
    </Stack.Navigator>

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

您可以在组件中使用navigation.setOptions({ title: 'Updated!' }) 来修改所需的导航选项。

【讨论】：

【解决方案2】：

我刚刚遇到了同样的问题，我花了一点时间才弄清楚。文档没有最好的例子。

根据文档，您必须在 useEffect 之类的内部使用 setOptions，否则会收到警告。

在本例中，站对象作为参数传递，“位置”是我想用作标题的内容。 useEffect 还监视 title 变量是否更改，因此在随后的重新加载时，它将更改它。否则只会设置第一次。

function MyScreen({navigation, route}) {
  const station = route.params.station;

  // update the title on page load
  const title = station.location;
  useEffect(() => {
    navigation.setOptions({
      title: title,
    });
  }, [title]);

...

【讨论】：

使用 useEffect() 被证明在设置屏幕标题标题方面非常有效

【解决方案3】：

您可以使用 navigation.setOptions 在屏幕组件本身中编辑屏幕的导航选项 https://reactnavigation.org/docs/headers#updating-options-with-setoptions

【讨论】：