带有标签栏的底部标签答案

【问题标题】：BottomTabs with Tabbar带有标签栏的底部标签
【发布时间】：2018-08-22 07:12:30
【问题描述】：

我正在使用 v2 的 react native navigation 进行导航，并且我正在尝试使用底部选项卡和侧边菜单进行布局。这是我目前的布局

export const goHome = () => Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'app.SideMenu',
        },
      },
      center: {
          bottomTabs: {
            id: 'BottomTabsId',
            options: {
              topbar: {
                visible: true,
              }
            },
            children: [
              {
                component: {
                  name: SERVICES_SCREEN.id,
                  options: {
                    topBar: {
                      title: {
                        text: "Tab One"
                      },
                    },
                    bottomTab: {
                      badge: '2',
                      fontSize: 12,
                      text: 'Create Job',
                      icon: require('./res/beep-green.png')
                    }
                  }
                },
              },
              {
                component: {
                  name: CREDITS_SCREEN.id,
                  options: {
                    topBar: {
                      title: {
                        text: "Tab One"
                      },
                    },
                    bottomTab: {
                      badge: 'New',
                      text: 'Credits',
                      fontSize: 12,
                      icon: require('./res/beep-green.png')
                    }
                  }
                },
              },
              {
                component: {
                  name: PROFILE_SCREEN.id,
                  options: {
                    topBar: {
                      title: {
                        text: "Tab One"
                      },
                    },
                    bottomTab: {
                      badge: '',
                      text: 'Profile',
                      fontSize: 12,
                      icon: require('./res/beep-green.png')
                    }
                  }
                },
              },
            ],
          },
      }
    }
  }
});

问题是我希望标签也有标签栏，我该如何实现？

【问题讨论】：

标签： react-native react-native-navigation

【解决方案1】：

用这个布局解决了

export const goHome = () => Navigation.setRoot({
  root: {
    sideMenu: {
      left: {
        component: {
          name: 'app.SideMenu',
        },
      },
      center: {
        bottomTabs: {
          id: 'BottomTabsId',
          options: {
            topbar: {
              visible: true,
            }
          },
          children: [
            {
              stack: {
                id: 'Tabs',
                children: [
                  {
                    component: {
                      name: SERVICES_SCREEN.id,
                      options: {
                        topbar: {
                          visible: true
                        },
                        bottomTab: {
                          badge: '2',
                          fontSize: 12,
                          text: 'Create Job',
                        }
                      }
                    },
                  },
                ]
              }
            },
            {
              stack: {
                id: 'Tabs2',
                children: [
                  {
                    component: {
                      name: CREDITS_SCREEN.id,
                      options: {
                        bottomTab: {
                          badge: 'New',
                          text: 'Credits',
                          fontSize: 12,
                        }
                      }
                    },
                  },
                ]
              }
            },
            {
              stack: {
                id: 'Tabs3',
                children: [
                  {
                    component: {
                      name: PROFILE_SCREEN.id,
                      options: {
                        bottomTab: {
                          badge: '',
                          text: 'Profile',
                          fontSize: 12,
                        }
                      }
                    },
                  },
                ]
              }
            },
          ],
        },
      }
    }
  }
});

【讨论】：