React native 需要在导航抽屉内显示可扩展列表视图

我是一名Android应用程序开发人员。我已经开始研究React Native。我无法找到在导航抽屉中显示可扩展列表的方法。如果此功能可以在其中完成，则建议使用库。

navigationOptions

无法提供列表（请参阅下面的代码）

我想显示可扩展视图，如第4项

我的代码是：-

从“反应导航”导入{DrawerNavigator}；
从“React”导入React，{Component}；
进口{
平台，
样式表，
文本，
形象,，
看法
可触摸高光
}从“反应本机”；
从“./screen/Screen1”导入屏幕1
从“./screen/Screen2”导入Screen2
const util=require（'util'）；
类MyHomeScreen扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
标题：“ffffff”
};
}
组件将接收道具（下一步）{
导航选项={
标题：this.nextrops.headertite
};
}
静态导航选项={
抽屉标签：“家”，
抽屉图标：（{tintColor}）=>(
),
标题：“NIIT”
};
render（）{
返回（）；
}
}
类MyNotificationsScreen扩展了React.Component{
静态导航选项={
抽屉标签：“通知”，
抽屉图标：（{tintColor}）=>（），
标题：“侏儒”
};
render（）{
返回（）；
}
}
const styles=StyleSheet.create({
图标：{
宽度：24，
身高：24
}
});
常数抽屉屏幕=抽屉显示器({
屏幕1：{
屏幕：我的主屏幕
},
屏幕2：{
屏幕：MyNotificationsScreen
}
}，{headerMode:'none'}）
导出默认抽屉屏幕；

此时，react导航不支持抽屉导航器中的可折叠菜单

但是，您可以通过向导航器提供自己的

contentComponent

来实现自己的：

const DrawerScreen = DrawerNavigator({
  Screen1: {
    screen: MyHomeScreen
  },
  Screen2: {
    screen: MyNotificationsScreen
  }
}, {
  headerMode: 'none',
  contentComponent: MyDrawer
})

const MyDrawer = (props) => ...

有关更多信息，请参阅

---

您可以使用类似的方法来实现可折叠菜单本身的效果。

react导航目前不支持抽屉导航器中的可折叠菜单

但是，您可以通过向导航器提供自己的

contentComponent

来实现自己的：

const DrawerScreen = DrawerNavigator({
  Screen1: {
    screen: MyHomeScreen
  },
  Screen2: {
    screen: MyNotificationsScreen
  }
}, {
  headerMode: 'none',
  contentComponent: MyDrawer
})

const MyDrawer = (props) => ...

有关更多信息，请参阅

---

您可以使用类似的方法来实现可折叠菜单本身的效果。

我已经为这个问题开发了一个解决方案。我的代码使用了
“@react-navigation/drawer”：“^5.1.1”和
“@react-navigation/native”：“^5.0.9”

---

Gihub链接-

我已经为这个问题开发了一个解决方案。我的代码使用了
“@react-navigation/drawer”：“^5.1.1”和
“@react-navigation/native”：“^5.0.9”

---

Gihub链接-

我认为这是一个简单的类，实现了OP的要求。它使用react导航v5。它是一个独立的组件，通过

ExpandableDrawerOps

配置（

title

是父抽屉的名称，即包含子抽屉且没有导航，选项是标签名称到导航屏幕组件名称的映射。）它是用TypeScript编写的（这两个文件都是.tsx文件），因此，如果您不使用TypeScript，只需去掉键入的内容

import {
  DrawerContentComponentProps,
  DrawerContentScrollView,
  DrawerItem,
} from '@react-navigation/drawer';
import React from 'react';
import { Text, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import styles from './styles';

export type ExpandableDrawerProps = DrawerContentComponentProps & {
  title: string;
  choices: Map<string, string>;
};

export default class ExpandableDrawer extends React.Component<
  ExpandableDrawerProps,
  {
    isExpanded: boolean;
  }
> {
  constructor(props: ExpandableDrawerProps, state: { isExpanded: boolean }) {
    super(props);
    this.state = state;
  }

  onPress = (): void => {
    this.setState(() => {
      return {
        isExpanded: !this.state.isExpanded,
      };
    });
  };

  render = (): JSX.Element => {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          activeOpacity={0.8}
          onPress={this.onPress}
          style={styles.heading}
        >
          <Text style={styles.expander}>{this.props.title}</Text>
        </TouchableOpacity>

        {this.state.isExpanded ? (
          <DrawerContentScrollView>
            <View style={styles.expandedItem}>
              {[...this.props.choices.keys()].map(
                (label: string): JSX.Element | null => {
                  const screen = this.props.choices.get(label);
                  if (screen != undefined) {
                    return (
                      <DrawerItem
                        key={label}
                        label={label}
                        onPress={(): void => {
                          this.props.navigation.navigate(screen);
                        }}
                      />
                    );
                  } else {
                    return null;
                  }
                }
              )}
            </View>
          </DrawerContentScrollView>
        ) : null}
      </View>
    );
  };
}

导入{
抽屉内容组件支柱，
DroperContentScrollView，
抽屉式，
}来自“@react导航/抽屉”；
从“React”导入React；
从“react native”导入{Text，View}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“./styles”导入样式；
导出类型ExpandableDroperOps=DroperContentComponentProps&{
标题：字符串；
选择：地图；
};
导出默认类ExpandableDrawer扩展React.Component<
可扩展抽屉操作，
{
isExpanded：布尔型；
}
> {
构造函数（props:ExpandableDrawerProps，状态：{isExpanded:boolean}）{
超级（道具）；
this.state=状态；
}
onPress=（）：void=>{
此.setState（（）=>{
返回{
isExpanded:！this.state.isExpanded，
};
});
};
render=（）：JSX.Element=>{
返回(
{this.props.title}
{this.state.isExpanded(
{[…this.props.choices.keys（）].map(
（标签：字符串）：JSX.Element | null=>{
const screen=this.props.choices.get（标签）；
如果（屏幕！=未定义）{
返回(
{
这个.props.navigation.navigate（屏幕）；
}}
/>
);
}否则{
返回null；
}
}
)}
)：null}
);
};
}

您可以将该代码放到一个文件中，创建一个简单的样式文件或从该代码中删除它们，然后就可以使用

在正常的抽屉导航中

下面是我如何在一个普通的导航抽屉中使用它

const DrawerContent = (props: DrawerContentComponentProps): JSX.Element => {
  const c = new Map<string, string>();
  c.set('SubItem 1', 'SubItem1');
  c.set('SubItem 2', 'SubItem2');
  const expandable: ExpandableDrawerProps = {
    title: 'Expandable Drawer',
    choices: c,
    navigation: props.navigation,
    state: props.state,
    descriptors: props.descriptors,
    progress: props.progress,
  };
  return (
    <DrawerContentScrollView {...props}>
      <View style={styles.drawerContent}>
        <Drawer.Section style={styles.drawerSection}>
          <DrawerItem
            label="Item 1"
            onPress={(): void => {
              props.navigation.navigate('Item1');
            }}
          />

          <ExpandableDrawerMenu {...expandable} />

          <DrawerItem>
            label="Item 2"
            onPress={(): void => {
              props.navigation.navigate('Item2');
            }}
          />
          <DrawerItem
            label="Item 3"
            onPress={(): void => {
              props.navigation.navigate('Item3');
            }}
          />
        </Drawer.Section>
      </View>
    </DrawerContentScrollView>
  );
};

export default class Navigator extends Component {
  render = (): JSX.Element => {
    const Drawer = createDrawerNavigator();

    return (
      <NavigationContainer>
        <Drawer.Navigator
          drawerContent={(props: DrawerContentComponentProps): JSX.Element =>
            DrawerContent(props)
          }
          initialRouteName="Item1"
        >
          <Drawer.Screen name="Item1" component={Item1Screen} />
          <Drawer.Screen name="SubItem1" component={SubItem1Screen} />
          <Drawer.Screen name="SubItem2" component={SubItem2Screen} />
          <Drawer.Screen name="Item2" component={Item2Screen} />
          <Drawer.Screen name="Item3" component={Item3Screen} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  };
}

const-DrawerContent=（props:DrawerContentComponentProps）：JSX.Element=>{
常数c=新映射（）；
c、 集合（“子项1”、“子项1”）；
c、 集合（‘子项2’、‘子项2’）；
常量可扩展：可扩展抽屉操作={
标题：“可扩展抽屉”，
选择：c，
导航：道具导航，
状态：props.state，
描述符：道具描述符，
进步：道具，进步，
};
返回(
{
props.navigation.navigate（'Item1'）；
}}
/>
label=“项目2”
onPress={（）：void=>{
props.navigation.navigate（'Item2'）；
}}
/>
{
props.navigation.navigate（'Item3'）；
}}
/>
);
};
导出默认类导航器扩展组件{
render=（）：JSX.Element=>{
const Drawer=createDrawerNavigator（）；
返回(
抽屉内容（道具）
}