反应原生侧菜单不起作用

Question

我正在尝试使用反应原生侧菜单 https://github.com/react-native-community/react-native-side-menu 我的代码如下所示。没有错误，甚至输出相互重叠

   var list = [{name: "komaldeep", subtitle: "dssdfds", avatar_url:"sadasdsa" }];
  export default class First extends Component {
      constructor(props) {
          super(props);
         this.state = {
           isOpen: false,
        };
       this.toggleSideMenu = this.toggleSideMenu.bind(this);
     }

toggleSideMenu () {
    this.setState({
        isOpen: !this.state.isOpen
    })
}
render() {
    //menu list `enter code here`
    const MenuComponent = (
        <View style={{flex: 1, backgroundColor: '#ededed', paddingTop: 200}}>
            <List containerStyle={{marginBottom: 20}}>
                {
                    list.map((l, i) => (
                        <ListItem
                            roundAvatar
                            onPress={() => console.log('Pressed')}
                            avatar={l.avatar_url}
                            key={i}
                            title={l.name}
                            subtitle={l.subtitle}
                        />
                    ))
                }
            </List>
        </View>
    )

    return (
        <SideMenu
            isOpen={this.state.isOpen}
            menu={MenuComponent} >
           //Menu Component just contain some random text
            <Menu toggleSideMenu={this.toggleSideMenu.bind(this)}/>
        </SideMenu>
    );
  }
}

你能指导我吗......我做错了什么..

输出看起来像这样在此处输入图像描述

Answer 1

菜单中的项目显示在屏幕右侧（似乎在菜单之外）的原因是您的 MenuComponent 占据了整个屏幕。将道具openMenuOffset={number}设置为侧菜单，并使用相同的数字以菜单组件的样式设置width: number。