是否可以重构React-Navigator元素？

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 

我试图重构，你会做的风格以同样的方式反应这样的组件：

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