Question

人我想用

配置标头

static navigationOptions = ({ navigation  }) => {

}

我使用React Navigation 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，否则您将收到警告。

在这个例子中，一个 station 对象被作为参数传递，'location' 是我想用作标题的。 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]);

...

Answer 3

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

如何设置React Navigation v5的标题选项？

3 个答案: