Можно ли провести рефакторинг React-Navigator Elements?

Question

Сейчас я изучаю веревки с помощью React Native и React Navigator, и я наткнулся на что-то в процессе разработки, где я чувствую, что хочу реализовать метод СУХОЙ (не повторяйся).

Вот мой код компонента:

export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: { 
        screen: TabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: StackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        }, { 
          tabBarPosition: 'bottom',
          lazyLoad: true,
          animationEnabled: false,
          swipeEnabled: false
        })
      }
    }, {
      tabBarPosition: 'bottom',
      lazyLoad: true,
      animationEnabled: false,
      swipeEnabled: false  
    });

    return <MainNavigator />;
  }
}

Как видите, у меня есть следующий фрагмент повторяемого кода:

tabBarPosition: 'bottom',
lazyLoad: true,
animationEnabled: false,
swipeEnabled: false

Я попытался провести рефакторинг так же, как вы бы делали стили в компонентах React, например:

export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: { 
        screen: TabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: StackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        }, { defaultTabStyles })
      }
    }, { defaultTabStyles });

    return <MainNavigator />;
  }
}

const defaultTabStyles = {
  tabBarPosition: 'bottom',
  lazyLoad: true,
  animationEnabled: false,
  swipeEnabled: false
};

Как вы можете видеть, это намного более чистый способ сделать что-либо, если это сработает. Но это не работает, так есть ли способ рефакторинга это правильно или мне нужно придерживаться моей первоначальной реализации?

Answer 1

Похоже, вы оборачиваете defaultTabStyles объект в фигурных скобках, который благодаря сокращению свойства объекта ES6 создает следующий объект:

{
  defaultTabStyles:
    {
      animationEnabled: false,
      lazeLoad: true,
      swipeEnabled: false,
      tabBarPosition: 'bottom',
    },
}

Который не содержит ни одной из клавиш, которые ищет навигатор. Попробуйте удалить фигурные скобки:

export default class App extends React.Component {
  render() {
    const MainNavigator = TabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: { 
        screen: TabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: StackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        }, defaultTabStyles) // instead of { defaultTabStyles }
      }
    }, defaultTabStyles);  // instead of { defaultTabStyles }

    return <MainNavigator />;
  }
}

const defaultTabStyles = {
  tabBarPosition: 'bottom',
  lazyLoad: true,
  animationEnabled: false,
  swipeEnabled: false
};

Кроме того, чтобы сохранить его СУХОЙ в дальнейшем, вы можете переопределить параметры по умолчанию для определенных навигаторов, используя синтаксис разброса:

const mainScreenTabStyles = {
  ...defaultTabStyles,
  tabBarPosition: 'top',
}