是否可以重構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', 
}