Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- **NAVIGATION OPTIONS**
- ```js
- export const StackNavigationOptions = (params = {}) => {
- let { headerStyle, headerTitleStyle, ...others } = params
- if (!headerStyle) headerStyle = {}
- if (!headerTitleStyle) headerTitleStyle = {}
- return {
- headerTransitionPreset: 'uikit',
- headerStyle: {
- backgroundColor: 'black',
- borderBottomColor: 'transparent',
- shadowOpacity: 0,
- shadowOffset: {
- height: 0
- },
- shadowRadius: 0,
- elevation: 0,
- ...headerStyle
- },
- headerTintColor: 'white',
- headerTitleStyle: {
- color: 'white',
- textAlign: 'center',
- fontSize: 20,
- fontWeight: 'bold',
- backgroundColor: 'transparent',
- fontFamily: Config.fontFamily,
- ...headerTitleStyle
- },
- headerBackTitle: null,
- headerBackImage: <IonIcon testID='leftIcon'
- style={styles.leftIcon}
- name={'md-arrow-back'}
- />,
- transparentCard: true,
- ...others
- }
- }
- export const getChildComponentNavigationOptions = navigation => {
- let currentNav = navigation
- if (!navigation.router) {
- currentNav = navigation.dangerouslyGetParent()
- }
- let options = null
- if (currentNav && currentNav.router) {
- const component = currentNav.router.getComponentForState(currentNav.state)
- if (component && component.wrappedComponent && component.wrappedComponent.navigationOptions) {
- if (typeof component.wrappedComponent.navigationOptions === 'function') {
- options = component.wrappedComponent.navigationOptions({
- navigation: {
- ...navigation,
- state: navigation.state
- }
- })
- } else {
- options = {
- ...component.wrappedComponent.navigationOptions,
- state: navigation.state
- }
- }
- } else if (component && component.navigationOptions) {
- if (typeof component.navigationOptions === 'function') {
- options = component.navigationOptions({
- navigation: {
- ...navigation,
- state: navigation.state
- }
- })
- } else {
- options = {
- ...component.navigationOptions,
- state: navigation.state
- }
- }
- }
- }
- if (options && options.useDrawer) {
- options.headerLeft =
- <TouchableOpacity
- style={styles.btnMenu}
- onPress={() => {
- if (navigation.openDrawer) navigation.openDrawer()
- }}
- >
- <IonIcon
- testID='drawer-menu'
- style={styles.leftIcon}
- name={'md-menu'}
- />
- </TouchableOpacity>
- }
- return options
- }
- ```
- **Use in route config**
- ```js
- defaultNavigationOptions: ({ navigation, screenProps }) => {
- return StackNavigationOptions(getChildComponentNavigationOptions(navigation, screenProps) || {})
- },
- ```
- **Define in injected screen for overriding**
- ```js
- @inject("store")
- @observer
- class Map extends Component {
- ....
- }
- Map.wrappedComponent.navigationOptions = ({ navigation }) => {
- return {
- headerTitle: 'MAP',
- useDrawer: true
- }
- }
- export default Map
- ```
- **Define in normal screen for overriding**
- ```js
- class Screen extends Component {
- ....
- }
- Screen.navigationOptions = ({ navigation }) => {
- return {
- title: 'Me'
- }
- }
- export default Screen
- ```
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement