Environment
- React Native
- React Navigation 4.x
- node
Premise
Typically, react navigation's header options are written in App.js.
However, this is undesirable for two reasons:
- App.js gets bigger and more complex
- Knowledge specific to each screen is defined outside the screen
To solve this problem, react navigation provides the ability to override header options with static navigationOptions
(setParams from your screen ).
However, if you are using HOC, you need to use static navigationOptions
in HOC and you need to devise it.
This time, consider the following simple screen structure example.
ScreenA ScreenB
ScreenA and ScreenB both use HOC.
Code
ScreenA and ScreenB use navigation.setParams
in componentDidMount
method to specify screen-specific options.
Then, HOC ( at withCommonProps.js ) receives these options in static navigationOptions
method use navigation.getParam
.
Note that options not received by the static navigationOptions
method are not reflected.