Question

我正在使用React Navigation。我有一个“更多”按钮作为底部标签导航器的最后一项，我希望它在用户单击时打开一个抽屉。我尝试了很多事情，研究了很多答案，但是没有任何效果。我能得到的最接近的是下面。它带您进入一个包含可以打开的抽屉的页面。但是，我希望在单击它时将其打开。

到目前为止，我已经有了这段代码...

const MoreStack = createDrawerNavigator({
  More: { screen: More }
})

const MainTabNavigator = createBottomTabNavigator({
    Home: { screen: HomeStack }
    ...
    More: { screen: MoreStack }
})

const MainStackNavigator = createStackNavigator({
    MainTabNavigator: MainTabNavigator,
})

const AppSwitchNavigator = createSwitchNavigator({
  Welcome: { screen: WelcomeScreen },
  Home: { screen: MainStackNavigator }
})

const AppContainer = createAppContainer(AppSwitchNavigator)

更新

因此，一种可能的解决方案是使用呈现Route列表（而不是抽屉）的初始Route打开MoreStack。在MoreStack中，我还创建了需要包含在More FlatList中的所有页面。然后在“更多”屏幕中，创建一个以每个路线为对象的数组，并使用Navigation.navigate（item.name）

从FlatList链接到它们

这个问题以及使它像抽屉一样工作的关键是在MainTabNavigator中设置backBehavior：“ history”。然后，当在“ SwipeRight”的“更多”屏幕上添加手势处理程序并将其设置为navigation.goBack（null）时，它将使您返回上一条路线，从而感觉就像您在“关闭”更多屏幕。

我不确定进入MoreStack中路线的更多导航情况后，这一切将如何工作，但是我想我会在处理完之后解决这个问题。

Answer 1

您的标签导航器和StackNavigator应该是MainTabNavigator的子级，如下：

           const MainTabNavigator = createBottomTabNavigator({
                   Home: { screen: HomeStack }

                   More: { screen: MoreStack }
           })             

           const MainStackNavigator = createStackNavigator({
              MainTabNavigator: MainTabNavigator,
            })

           const MoreStack = createDrawerNavigator({
              SomePage:{screen:MainTabNavigator}//<<<<<<<<
               SomeOther:{screen:MainStackNavigator}//<<<<<<<<<<
               More: { screen: More }

               })

           const AppSwitchNavigator = createSwitchNavigator({
           Welcome: { screen: WelcomeScreen },
           Home: { screen: MaoreStack }//<<<<<<<<<<<<<<<<<<<<<<
             })

，然后将MoreStack提供给AppSwitchNavigator .....

Answer 2

您可以使用此代码。我使用了3.x版本的react-navigation

const FooterTabs = (props) => (
 <Footer>
  <FooterTab}>
     <Button
       vertical
       onPress={() => props.navigation.openDrawer()}>
      <Text style={styles.Text}> Menu</Text>
     </Button>
   </FooterTab>
  </Footer>
 )
const MainTabNavigator = createBottomTabNavigator({
    Home: { screen: HomeStack }
    ...
    More: { screen: MoreStack }
},{
tabBarComponent: props =>
  <FooterTabs
    {...props} />,
initialRouteName: "Home",
})

const MoreStack = createDrawerNavigator({
  More: { screen: More }
})

const AppContainer = createAppContainer(MoreStack )

如何在React Navigation中单击底部选项卡来打开抽屉？

2 个答案: