如何设置react导航v5的标题选项

Question

伙计们我想用配置标题

static navigationOptions = ({ navigation  }) => {
}

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

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

Answer 1

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

Answer 2

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

根据文档，你必须在useEffect之类的东西中使用setOptions，否则你会收到警告。

在本例中，一个站对象作为参数传递，"location"是我想要用作标题的内容。useEffect还会观察标题变量是否发生变化，因此在随后的重新加载中，它会将其更改。否则，它将只设置第一次。

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]);
...

Answer 3

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