尝试使用自定义内容创建 React 导航抽屉

Question

我正在尝试创建一个带有自定义内容的 React Navigation 抽屉（我想放置个人资料信息，可能不是任何链接）。我这样做遇到了很多麻烦。

这是我的基本堆栈/抽屉：

const Drawer = createDrawerNavigator();

function DrawerNav() {
  return (
    <ScrollView>
      <DrawerItems {...props} />
      <Text>Test Content</Text>
    </ScrollView>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={Login} options={{
          headerShown: false
        }} />
        <Stack.Screen name="Detail" component={Detail} />
        <Stack.Screen name="Chat" component={Chat} />
        <Stack.Screen name="Leagues" component={Leagues} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Home" component={Home} options={{
          headerRight: (navigation) => (
            <TouchableOpacity onPress={(navigation) => navigation.dispatch(DrawerActions.toggleDrawer())}>
              <EvilIcons name="navicon" size={50} color="black" />
            </TouchableOpacity>
          ),
          headerLeft: () => (
            null
          ),
        }} />
        <Stack.Screen name="CommForm" component={CommForm} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

我想要的只是一个侧边栏，我可以通过按<TouchableOpacity>上面的按钮来切换侧边栏，其中包含自定义内容。

我可以使用 React Native Side Menu 来做到这一点，但似乎如果我使用 React Navigation，我应该学习如何使用这个库来做到这一点，但是似乎很难做我想做的事情。

如何使用 React Navigation 创建包含自定义内容的侧边栏？我主要想使用堆栈导航。

Answer 1

我会做这样的事情：

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem label="..." />
      // ...
    </DrawerContentScrollView>
  );
}

function StackNavigator({navigation}) {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          headerRight: () => (
            <Button title="press" onPress={() => navigation.toggleDrawer()} />
          ),
        }}
      />
      // Your other screens... 
    </Stack.Navigator>
  );
}

function DrawerNavigator({navigation, route}) {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Stack" component={StackNavigator} />
    </Drawer.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
};

因此，您可以将抽屉导航设置为主导航器，并将堆栈导航设置为抽屉导航的屏幕。这样您就可以切换抽屉，而无需先导航到它。

要创建自定义抽屉内容，您可以将组件传递到drawerContent抽屉导航器上。

如果您要使用DrawerContentScrollView和/或DrawerItem像我在本示例中所做的那样，请务必从 导入它'@react-navigation/drawer'; 。

有关更多信息，请参阅文档https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent。