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对象属性的简写，创建了以下对象：

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

是否可以重构React-Navigator Elements？

1 个答案: