使用react-native-side-menu单击菜单中的文本时如何关闭侧边菜单

时间:2016-02-23 13:40:48

标签: react-native

native-side-menu,我需要在单击菜单中的任何文本时关闭侧边菜单,需要关闭侧边菜单,这里是代码: 的 Main.js

class Button extends Component {
  handlePress(e) {
    if (this.props.onPress) {
      this.props.onPress(e);
    }
  }

  render() {
    return (
      <TouchableOpacity
        onPress={this.handlePress.bind(this)}
        style={this.props.style}>
        <Text>{this.props.children}</Text>
      </TouchableOpacity>
    );
  }
}

module.exports = class Basic extends Component {
  state = {
    isOpen: false,
  };

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  }

  updateMenuState(isOpen) {
    this.setState({ isOpen, });
  }

  render() {
    return (
      <SideMenu ref="sidemenu"
        menu={<Menu />}
        touchToClose={true} disableGestures={true}>
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to React Native!
          </Text>
          <Text style={styles.instructions}>
            To get started, edit index.ios.js
          </Text>
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+Control+Z for dev menu
          </Text>
        </View>
        <Button style={styles.button} onPress={() => this.toggle()}>
          <Image
            source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} />
        </Button>
      </SideMenu>
    );
  }
};

Menu.js

module.exports = class Menu extends Component {
  render() {
    return (
      <ScrollView scrollsToTop={false} style={styles.menu}>
        <View style={styles.avatarContainer}>
          <Image
            style={styles.avatar}
            source={{ uri, }}/>
          <Text style={styles.name}>Your name</Text>
        </View>

        <Text style={styles.item} >About</Text>
        <Text style={styles.item}>Contacts</Text>
      </ScrollView>
    );
  }
};

当点击menu.js中的关于文本时,我需要关闭侧边菜单,我使用的是react-native版本:0.20.0。任何一个给我建议如何解决这个,任何帮助非常感谢

0 个答案:

没有答案