找不到变量: drawer_width

Question

尝试在react本机中创建侧边菜单，从此url https://reactnativeexample.com/simple-lightweight-customisable-menu-drawer-component/获取代码

但是当我运行时得到这个错误: can't find variable: drawer_width我已经尝试了很多方法来解决这个问题，但是还没有成功

请任何人帮助我

下面是完整的代码

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'

import MenuDrawer from 'react-native-side-drawer'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <TouchableOpacity onPress={this.toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer 
          open={this.state.open} 
          drawerContent={this.drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})

Answer 1

我认为问题是在index.js样式表中没有收到DRAWER_WIDTH属性，所以您可以复制此代码并对其进行自定义并解决其问题

我建议复制index.js并粘贴到您的代码中，然后安装prop-types npm。

您可以根据需要将drawerPercentage替换为硬编码的值，并将其转换为整个代码

const DRAWER_WIDTH = SCREEN_WIDTH * (drawerPercentage / 100)

这一行写成这样

const DRAWER_WIDTH = SCREEN_WIDTH * (45 / 100)