Получение стилей по умолчанию при обновлении с React Navigation v4 до v5

Question

В настоящее время я использую React Navigation v4 и перехожу на v5. Я использую официальную документацию для обновления, но, к сожалению, я столкнулся с блокировщиком.

В V4 я могу сделать следующее:

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

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

Но в V5 I кажется, я не могу получить доступ к параметру 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} />
});