javascript - 如何在反应导航 5 中定义屏幕内的自定义标题？

Question

我知道我们在根文件中定义屏幕时使用选项道具

 <Stack.Screen
          name="index"
          component={Index}
          options={({ navigation, route }) => ({
            headerRight: (props) => (
              <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
            ),
          })}
        />

但我想像我们以前在反应导航 4 中所做的那样在屏幕中自行定义

Index.navigationOptions = () => {
  return {
    headerRight: (
      <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
    ),
  };
};

但是我如何在 React Navigation 5 中做到这一点？

标签： javascriptreactjsreact-nativereact-navigationreact-navigation-v5

Answer 1

使用导航.setOptions

function HomeScreen({ navigation }) {

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <MaterialIcons name="add" size={30} style={{ marginRight: 20 }} />
      ),
    });
  }, [navigation]);