是否可以重构 React-Navigator Elements？

Question

我目前正在学习 React Native 和 React Navigator 的诀窍，我在开发中遇到了一些我觉得我想实现 DRY（不要重复自己）技术的东西。

这是我的组件代码：

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 对象属性 shorthand 创建了以下对象：

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

其中包含导航器正在查找的 none 个键。尝试删除花括号：

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',
}

是否可以重构 React-Navigator Elements？

Is it possible to refactor React-Navigator Elements?

refactoring

react-native

ecmascript-2016

react-navigation