反応しやすいネイティブサイドメニュー相違する

Question

私は副反応のあるネイティブ側のメニューを操作していますが、私が表示したいメニューに問題があります。 isOpenがfalseに設定されているときも常に表示されます。これは私のコードです：

import React, {Component} from 'react'; 
import {Dimensions,ListView,ScrollView,StatusBar,Text,TouchableOpacity,View} from 'react-native'; 
import Icon from 'react-native-vector-icons/Ionicons'; 
import {Colors as JoboColors} from '../styles/General'; 
import SideMenu from 'react-native-side-menu'; 
//import SideBar from './SideBar'; 

export default class JobList extends Component { 
    state = { 
     isOpen: false, 
    }; 

    handleMenu =() => { 
     this.setState({isOpen: !this.state.isOpen}); 
    } 

    updateMenuState = (isOpen) => { 
     this.setState({ isOpen}); 
    } 

    render() { 
     const myMenu = <UserMenu />; 
     return (
      <SideMenu menu={myMenu} 
       isOpen={this.state.isOpen} 
       onChange={this.updateMenuState}> 
       <View> 
        <StatusBar 
         backgroundColor= {JoboColors.orangeC} 
         barStyle="light-content" 
         translucent={false}/> 
        <View style={styles.actionBar}> 
         <TouchableOpacity style={styles.menuIcon} onPress={this.handleMenu}> 
          <Icon name="ios-menu" size={32} style={styles.actionBarIcons}/> 
         </TouchableOpacity> 
         <Icon name="ios-search" size={30} style={styles.actionBarIcons}/> 
        </View> 
        <View style={{backgroundColor: 'white', justifyContent: 'center', flex: 1}}> 
         <Text>This is the content</Text> 
        </View> 
       </View> 
      </SideMenu> 
     ); 
    } 
} 

class UserMenu extends Component { 
    render() { 
     return(
      <ScrollView style={styles.content}> 

      </ScrollView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    actionBar: { 
    height: 50, 
    flexDirection: 'row', 
    backgroundColor: Colors.orangeA, 
    alignItems: "center", 
    padding: 15, 
    }, 
    actionBarIcons: { 
    color: "white", 
    }, 
    menuIcon: { 
    flex: 2, 
    }, 
    content: { 
    backgroundColor: 'blue', 
    }, 
}); 

そして、これは、ビューの結果であり、青色のブロックがスライドメニューのビューであることを何卒ご了承下さい。誰かがこれと同様の問題を抱えていますか？

ありがとうございます。答えの

Answer 1

簡易版 -

render() { 
    const myMenu = <UserMenu />; 
    return (
     <View style={{flex:1}}> 
     <StatusBar backgroundColor="orange" barStyle="light-content" translucent={false}/> 
     <View style={styles.actionBar}> 
      <TouchableOpacity style={styles.menuIcon} onPress={this.handleMenu}> 
      <Text style={styles.actionBarIcons}>menu</Text> 
      </TouchableOpacity> 
      <Text style={styles.actionBarIcons}>search</Text> 
     </View> 
     <View style={{flex:1}}> 
      <SideMenu menu={myMenu} isOpen={this.state.isOpen} onChange={this.updateMenuState}> 
      <View style={{backgroundColor: 'white', justifyContent: 'center', flex: 1}}> 
       <Text>This is the content</Text> 
      </View> 
      </SideMenu> 
     </View> 
     </View> 
    ); 
    }