React-native側菜單不起作用

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看起來像這樣在此處輸入圖像描述

Answer 1

菜單中的項目顯示在屏幕右側（看似在菜單外部）的原因是，MenuComponent占據了整個屏幕。 將prop openMenuOffset={number}為SideMenu，並使用相同的數字來設置width: number ，其形式為MenuComponent。