Question

我正在尝试使用react-native-sidemenu 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>

    );
  }
}

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

OutPut看起来像这样 enter image description here

Answer 1

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

React-native Side-menu无效

1 个答案: