Question

我正在使用本机方面的菜单，但是我想要显示的菜单有问题，实际上当我把菜单属性放在这个元素时，当isOpen设置为假。这是我的代码：

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

react-native-side-menu异相

1 个答案: