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

あなたはES6オブジェクトのプロパティ速記のおかげで、次のオブジェクトを作成中括弧であなたのdefaultTabStylesオブジェクト、ラップされているように見えます：ナビゲータが探しているキーのどれが含まれていない

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