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

我正在学习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 />;
  }
}

我尝试以与您在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
};

导出默认类App扩展React.Component{
render（）{
const main navigator=TabNavigator({
欢迎：{screen:WelcomeScreen}，
auth:{screen:AuthScreen}，
main:{
屏幕：选项卡导航器({
映射：{screen:MapScreen}，
甲板：{screen:DeckScreen}，
审查：{
屏幕：StackNavigator({
回顾：{screen:ReviewScreen}，
设置：{屏幕：设置屏幕}
})
}
}，{defaultTabStyles}）
}
}，{defaultTabStyles}）；
返回；
}
}
常量defaultTabStyles={
tabBarPosition:'底部'，
懒汉：没错，
animationEnabled:错误，
swipeabled:false
};

---

正如你所看到的，这是一种更干净的做事方式，如果它能奏效的话。但是它不起作用，那么有没有办法正确地重构它，或者我需要继续使用我的原始实现？

看起来您正在将

defaultTabStyles

对象包装在大括号中，这得益于ES6对象属性速记创建了以下对象：

{
默认选项卡样式：
{
animationEnabled:错误，
拉泽洛德：没错，
swipeabled:false，
tabBarPosition:'底部'，
},
}

它不包含导航器正在查找的任何键。尝试移除大括号：

导出默认类App扩展React.Component{
render（）{
const main navigator=TabNavigator({
欢迎：{screen:WelcomeScreen}，
auth:{screen:AuthScreen}，
main:{
屏幕：选项卡导航器({
映射：{screen:MapScreen}，
甲板：{screen:DeckScreen}，
审查：{
屏幕：StackNavigator({
回顾：{screen:ReviewScreen}，
设置：{屏幕：设置屏幕}
})
}
}，defaultTabStyles）//而不是{defaultTabStyles}
}
}，defaultTabStyles）；//而不是{defaultTabStyles}
返回；
}
}
常量defaultTabStyles={
tabBarPosition:'底部'，
懒汉：没错，
animationEnabled:错误，
swipeabled:false
};

此外，为了使其在道路上保持干燥，您可以使用排列语法覆盖特定导航器的默认选项：

const main屏幕选项卡样式={
…默认样式，
Tabbar位置：“顶部”，
}

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
};