React-nativeサイドメニューが機能しない

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> 

    ); 
    } 
} 

にオーバーラップします。..

出力はこの enter image description here

Answer 1

理由のように見えますあなたのメニュー内の項目が画面の右側に表示されているように見えます。メニューの外に見えるのは、MenuComponentが画面全体を占めているということです。 openMenuOffset={number}小道具をSideMenuに設定し、同じ番号を使用してMenuComponentのスタイルでwidth: numberを設定します。