React Native Navigation - 底部标签和抽屉

Question

我正在尝试在我的 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，应用程序可以运行（但没有底部标签栏）

Answer 1

原来是需要为每个底部的tab设置一个图标，否则应用会崩溃：

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

这解决了问题。

Answer 2

在 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
              }
            }
          }
        }
      ]
    }
  }
}

React Native Navigation - 底部标签和抽屉

React Native Navigation - bottom tabs and drawer

jhipster

react-native

react-native-navigation

wix-react-native-navigation

react-native-navigation-v2