从 React Navigation v4 升级到 v5 时获取默认样式

Question

我目前正在使用 React Navigation v4 并正在迁移到 v5。我正在使用 official documentation 进行升级，但不幸的是，我遇到了拦截器。

在 V4 中，我可以执行以下操作：

export default function ExampleScreen(props) {
  return <View></View>
}

ExampleScreen.navigationOptions = ({navigation, navigationOptions}) => ({
  headerStyle: {
    ...navigationOptions.headerStyle,
    borderBottomWidth: 0
  },
  headerRight: () => <SearchBox navigation={navigation} />
})

但在 V5 中，我似乎无法访问 navigationOptions 参数，因此无法获取 navigationOptions.headerStyle。

export default function ExampleScreen(props) {
  props.navigation.setOptions({
    headerStyle: {
      // I can't get the default styles here.
      borderBottomWidth: 0
    },
    headerRight: () => <SearchBox navigation={props.navigation} />
  })

  return <View></View>
}

我如何在 React Navigation V5 中执行此操作，因为它在其他任何地方都没有记录？

Answer 1

将默认值放入变量并将其导出。然后在你需要的地方导入并使用：

export const headerStyle = {
  /* whatever */
};

// Use in `screenOptions`
<Stack.Navigator screenOptions={{ headerStyle }}></Stack.Navigator>;

// Use in `setOptions`
navigation.setOptions({
  headerStyle: [headerStyle, { borderBottomWidth: 0 }],
  headerRight: () => <SearchBox navigation={props.navigation} />
});