React Native Navigation - 底部选项卡和抽屉答案

【问题标题】：React Native Navigation - bottom tabs and drawerReact Native Navigation - 底部选项卡和抽屉
【发布时间】：2019-07-20 15:31:30
【问题描述】：

我正在尝试在我的 jhipster ignite 应用程序中添加底部标签栏，该应用程序使用 react-native-navigation v2。

屏幕注册如下：

Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)

例如：

export const LAUNCH_SCREEN = 'nav.LaunchScreen'

这是完整的导航：

export const topBar = {
  title: {
    text: 'MDNGHT',
    color: Colors.snow
  },
  leftButtons: [
    {
      id: 'menuButton',
      icon: Images.menuIcon,
      testID: 'menuButton',
      color: Colors.snow
    }
  ]
}

export const launchScreenComponent = {
  component: {
    id: 'id.launch',
    name: LAUNCH_SCREEN,
    options: {
      topBar: topBar,
      bottomTab: {
        fontSize: 12,
        text: 'HOME'
      }
    }
  }}

export const eventsScreenComponent = {
  component: {
    id: 'id.events',
    name: EVENTS_SCREEN,
    options: {
      topBar: topBar,
      bottomTab: {
        fontSize: 12,
        text: 'EVENTS'
      }
    }
  }
}

export const bottomTabs = {
  id: 'bottomTabs',
  children: [
    {
      stack: {
        children: [
          launchScreenComponent
        ]
      }
    },
    {
      stack: {
        children: [
          eventsScreenComponent
        ]
      }
    }
  ],
  options: {
    bottomTabs: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
      backgroundColor: '#121212',
      borderTopWidth: 0,
      shadowOffset: {width: 5, height: 3},
      shadowColor: 'black',
      shadowOpacity: 0.5,
      elevation: 5
    }
  }
}

export const appStack = {
  root: {
    sideMenu: {
      left: {
        component: {
          name: DRAWER_CONTENT
        }
      },
      center: {
        bottomTabs: bottomTabs
      }
    }
  }
}

Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
      topBar: {
        topBar: {
          title: {
            color: Colors.snow
          }
        },
        backButton: {
          showTitle: false,
          testID: 'backButton',
          icon: Images.chevronLeftIcon,
          color: Colors.snow,
          iconColor: Colors.snow
        },
        background: {
          color: Colors.background
        }
      },
      sideMenu: {
        left: {
          enabled: false
        }
      }
    })

    Navigation.setRoot(appStack)

    // handle app state and deep links
    AppState.addEventListener('change', handleAppStateChange)
    Linking.addEventListener('url', handleOpenURL)
  })

我没有收到任何错误消息，我的应用程序只是在启动后停止。当我放：

stack: {
          id: 'center',
          children: [launchScreenComponent]
        }

代替bottomTabs：appStack中的bottomTabs，应用程序可以工作（但没有底部标签栏）

【问题讨论】：

标签： react-native jhipster react-native-navigation wix-react-native-navigation react-native-navigation-v2

【解决方案1】：

在Layout docs from react-native-navigation 之后，您可以将appStack 替换为bottomTabs 实现而不是如下所示的抽屉（仅配置一个选项卡作为示例，在root.bottomTabs.children 添加另一个对象以添加另一个选项卡）。

export const appStack = {
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            id: 'firstTabStack',
            children: [
              {
                component: {
                  name: LAUNCH_SCREEN,
                  options: {
                    topBar: {
                      title: {
                        text: 'Welcome!',
                        color: Colors.snow
                      }
                    }
                  }
                }
              }
            ],
            options: {
              bottomTab: {
                iconColor: 'gray',
                textColor: 'gray',
                selectedIconColor: 'black',
                selectedTextColor: 'black',
                text: 'Launch Screen',
                testID: 'LAUNCH_SCREEN',
                icon: Images.menuIcon
              }
            }
          }
        }
      ]
    }
  }
}

【讨论】：

【解决方案2】：

事实证明，需要为每个底部标签设置一个图标，否则应用程序崩溃：

  bottomTab: {
    fontSize: 12,
    text: 'HOME'
    icon: require('../shared/images/logo.png')
  }

这解决了问题。

【讨论】：