React native 反应本机端菜单不同步

我正在使用react native side menu，但我想显示的菜单有一个问题，事实上，当我放置menu属性时，当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',
  },
});

import React，{Component}来自'React'；
从“react native”导入{维度、列表视图、滚动视图、状态栏、文本、TouchableOpacity、视图}；
从“反应本机矢量图标/离子图标”导入图标；
从“../styles/General”导入{Colors as JoboColors}颜色；
从“反应本机端菜单”导入侧菜单；
//从“./SideBar”导入侧栏；
导出默认类作业列表扩展组件{
状态={
伊索彭：错，
};
handleMenu=（）=>{
this.setState（{isOpen:！this.state.isOpen}）；
}
UpdateCustomate=（等参）=>{
this.setState（{isOpen}）；
}
render（）{
常量myMenu=；
返回(
这就是内容
);
}
}
类UserMenu扩展组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
操作栏：{
身高：50，
flexDirection:'行'，
背景颜色：Colors.orangeA，
对齐项目：“中心”，
填充：15，
},
行动酒吧：{
颜色：“白色”，
},
menuIcon：{
弹性：2，
},
内容：{
背景颜色：“蓝色”，
},
});

这是查看结果，请注意，蓝色块是幻灯片菜单的视图。有人有类似的问题吗

提前谢谢

---

答案的简化版本-

  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>
    );
  }

render（）{
常量myMenu=；
返回(
菜单
搜索
这就是内容
);
}