1

是否有可能在 react-native 的抽屉导航器中嵌套选项卡导航器？当调用汉堡菜单图标时，我希望抽屉覆盖整个屏幕并在其中实现 Tab navigator。我需要一些帮助。

4

2 回答 2

0

要覆盖整个屏幕，您可以将 设置为drawerWidth屏幕的宽度。查看如何在 react native 文档中获取屏幕宽度

您可以使用contentComponent来呈现选项卡导航器：

import { createDrawerNavigator } from 'react-navigation-drawer'
import { Dimensions } from 'react-native'

import MyTabNavigator from 'path-to-my-tab-navigator'

const { width } = Dimensions.get('window')

const DrawerNavigator = createDrawerNavigator(
  {
    ... // screens 
  },
  {
    drawerWidth: width
    contentComponent: MyTabNavigator
  }
)

请参阅文档

于 2019-12-12T13:57:58.383 回答
0

同样的问题。首先，我无法在Drawer Navigation中设置Tab Navigation 。

为此，我使用了“ React Native Tab View ”，您可以从“ https://www.npmjs.com/package/react-native-tab-view ”安装它，它对我有用。

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerComp {...props} />}>
  <Drawer.Screen name="MainStack" component={MainStack} />
</Drawer.Navigator>


export const CustomDrawerComp = (props) => {
  const {navigation} = props;
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'FIRST' },
    { key: 'second', title: 'SECOND' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={SceneMap({
        first: FirstTab,   << Add first tab view
        second: SecondTab,   << Add second tab view
      })}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
      />
  );
};

另外，使用后您可能会收到一个简单的错误“ Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager ”这很容易不用担心，您可以从“ https://github.com/ptomasroos解决它/react-native-scrollable-tab-view/issues/1050 "

我希望能帮助一些人。

抽屉导航中的图像标签

于 2021-03-20T22:20:22.250 回答