React Native Navigation：如何显示抽屉中的模式？

Question

有没有办法在 React Native 中显示抽屉中的模式？有一个，我根据答案更改了我的代码。

我现在的代码是这样的

MyRootStackNavigator.tsx

const Stack = createStackNavigator<RootStackParamList>();

const MyRootStackNavigator = () => {

  return (
    <Stack.Navigator mode="modal">
      <Stack.Screen
        name="Main"
        component={MyDrawerNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen 
        name="MyModal"
        component={MyModal}
      />
    </Stack.Navigator>
  );
};

MyDrawerNavigation.tsx

const Drawer = createDrawerNavigator();

const MyDrawerNavigator = () => {

  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Home"
        component={MyStackNavigator}
      />
      <Drawer.Screen
        name="About this app"
        component={About}
      />
    </Drawer.Navigator>
  );
}

但对于此代码，显示模式的部分不会出现在抽屉中。只有 Home 和 About this app 部分出现在抽屉中。如何设置该部分以在抽屉上显示模式？

Answer 1

您可以使用内部有模式的 CustomDrawerContent 并使用按钮打开模式

function CustomDrawerContent(props) {
  const [modalVisible, setModalVisible] = useState(false);
  return (
    <DrawerContentScrollView {...props}>
      <Modal
        style={{ flxe: 1, backgroundColor: 'red' }}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}>
        <Text>Modal Content Here</Text>
        <Button title="Close" onPress={() => setModalVisible(false)} />
      </Modal>
      <DrawerItemList {...props} />
      <DrawerItem
        label="Open Modal"
        onPress={() => {
          setModalVisible(true);
        }}
      />
    </DrawerContentScrollView>
  );
}

DrawerNavigator 应该这样设置

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}>

你可以在这里参考文档 https://reactnavigation.org/docs/drawer-navigator/#providing-a-custom-drawercontent

如果你想继续你在问题中输入的代码，你可以像下面那样导航到关于屏幕（而不是在内容中使用模式）

  <DrawerItem
    label="Open Screen"
    onPress={() => {
      props.navigation.navigate('About')
    }}
  />

React Native Navigation：如何显示抽屉中的模式？

React Naitve Navigation: How to show a modal from drawer?

reactjs

react-native

react-native-navigation