Advertisement
Guest User

Untitled

a guest
Oct 21st, 2019
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.21 KB | None | 0 0
  1. **NAVIGATION OPTIONS**
  2.  
  3. ```js
  4.  
  5.  
  6. export const StackNavigationOptions = (params = {}) => {
  7. let { headerStyle, headerTitleStyle, ...others } = params
  8.  
  9. if (!headerStyle) headerStyle = {}
  10. if (!headerTitleStyle) headerTitleStyle = {}
  11.  
  12. return {
  13. headerTransitionPreset: 'uikit',
  14. headerStyle: {
  15. backgroundColor: 'black',
  16. borderBottomColor: 'transparent',
  17. shadowOpacity: 0,
  18. shadowOffset: {
  19. height: 0
  20. },
  21. shadowRadius: 0,
  22. elevation: 0,
  23. ...headerStyle
  24. },
  25. headerTintColor: 'white',
  26. headerTitleStyle: {
  27. color: 'white',
  28. textAlign: 'center',
  29. fontSize: 20,
  30. fontWeight: 'bold',
  31. backgroundColor: 'transparent',
  32. fontFamily: Config.fontFamily,
  33. ...headerTitleStyle
  34. },
  35. headerBackTitle: null,
  36. headerBackImage: <IonIcon testID='leftIcon'
  37. style={styles.leftIcon}
  38. name={'md-arrow-back'}
  39. />,
  40. transparentCard: true,
  41. ...others
  42. }
  43. }
  44.  
  45. export const getChildComponentNavigationOptions = navigation => {
  46. let currentNav = navigation
  47. if (!navigation.router) {
  48. currentNav = navigation.dangerouslyGetParent()
  49. }
  50.  
  51. let options = null
  52. if (currentNav && currentNav.router) {
  53. const component = currentNav.router.getComponentForState(currentNav.state)
  54.  
  55. if (component && component.wrappedComponent && component.wrappedComponent.navigationOptions) {
  56. if (typeof component.wrappedComponent.navigationOptions === 'function') {
  57. options = component.wrappedComponent.navigationOptions({
  58. navigation: {
  59. ...navigation,
  60. state: navigation.state
  61. }
  62. })
  63. } else {
  64. options = {
  65. ...component.wrappedComponent.navigationOptions,
  66. state: navigation.state
  67. }
  68. }
  69. } else if (component && component.navigationOptions) {
  70. if (typeof component.navigationOptions === 'function') {
  71. options = component.navigationOptions({
  72. navigation: {
  73. ...navigation,
  74. state: navigation.state
  75. }
  76. })
  77. } else {
  78. options = {
  79. ...component.navigationOptions,
  80. state: navigation.state
  81. }
  82. }
  83. }
  84. }
  85.  
  86. if (options && options.useDrawer) {
  87. options.headerLeft =
  88. <TouchableOpacity
  89. style={styles.btnMenu}
  90. onPress={() => {
  91. if (navigation.openDrawer) navigation.openDrawer()
  92. }}
  93. >
  94. <IonIcon
  95. testID='drawer-menu'
  96. style={styles.leftIcon}
  97. name={'md-menu'}
  98. />
  99. </TouchableOpacity>
  100. }
  101.  
  102. return options
  103. }
  104. ```
  105.  
  106. **Use in route config**
  107.  
  108. ```js
  109. defaultNavigationOptions: ({ navigation, screenProps }) => {
  110. return StackNavigationOptions(getChildComponentNavigationOptions(navigation, screenProps) || {})
  111. },
  112. ```
  113.  
  114.  
  115. **Define in injected screen for overriding**
  116.  
  117. ```js
  118.  
  119. @inject("store")
  120. @observer
  121. class Map extends Component {
  122. ....
  123. }
  124.  
  125.  
  126. Map.wrappedComponent.navigationOptions = ({ navigation }) => {
  127. return {
  128. headerTitle: 'MAP',
  129. useDrawer: true
  130. }
  131. }
  132.  
  133. export default Map
  134. ```
  135.  
  136.  
  137. **Define in normal screen for overriding**
  138.  
  139. ```js
  140.  
  141. class Screen extends Component {
  142. ....
  143. }
  144.  
  145. Screen.navigationOptions = ({ navigation }) => {
  146. return {
  147. title: 'Me'
  148. }
  149. }
  150.  
  151. export default Screen
  152. ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement