如何在响应本机中使SideMenu

Question

想在本机应用程序中创建辅助菜单

某人（stackoverflow.com的成员）帮助我提供了一些代码（MenuDrawer.js），但是当我遇到提示“未在对象中未定义（评估'_this $ props.drawerPercentage'）的错误”

请任何人帮助我

完整代码下方

MenuDrawer.js

import React from "react"
import {
  Animated,
  Dimensions,
  StyleSheet,
  View,
  SafeAreaView,
  Platform,
  TouchableOpacity
} from "react-native"
import PropTypes from "prop-types"

const SCREEN_WIDTH = Dimensions.get("window").width
const SCREEN_HEIGHT = Dimensions.get("window").height
const isIOS = Platform.OS === "ios"
const VERSION = parseInt(Platform.Version, 10)

class MenuDrawer extends React.Component {
  constructor(props) {
    super(props)
    this.leftOffset = new Animated.Value(0)
    this.state = {
      expanded: false,
      fadeAnim: new Animated.Value(1)
    }
  }

  openDrawer = () => {
    const { drawerPercentage, animationTime, opacity } = this.props
    const DRAWER_WIDTH = SCREEN_WIDTH * (drawerPercentage / 100)

    Animated.parallel([
      Animated.timing(this.leftOffset, {
        toValue: DRAWER_WIDTH,
        duration: animationTime,
        useNativeDriver: true
      }),
      Animated.timing(this.state.fadeAnim, {
        toValue: opacity,
        duration: animationTime,
        useNativeDriver: true
      })
    ]).start()
  }

  closeDrawer = () => {
    const { animationTime } = this.props

    Animated.parallel([
      Animated.timing(this.leftOffset, {
        toValue: 0,
        duration: animationTime,
        useNativeDriver: true
      }),
      Animated.timing(this.state.fadeAnim, {
        toValue: 1,
        duration: animationTime,
        useNativeDriver: true
      })
    ]).start()
  }

  drawerFallback = () => {
    return (
      <TouchableOpacity onPress={this.closeDrawer}>
        <Text>Close</Text>
      </TouchableOpacity>
    )
  }

  componentDidUpdate() {
    const { open } = this.props

    open ? this.openDrawer() : this.closeDrawer()
  }

  renderPush = () => {
    const { children, drawerContent, drawerPercentage } = this.props
    const { fadeAnim } = this.state
    const animated = { transform: [{ translateX: this.leftOffset }] }
    const DRAWER_WIDTH = SCREEN_WIDTH * (drawerPercentage / 100)

    if (isIOS && VERSION >= 11) {
      return (
        <Animated.View style={[animated, styles.main]}>
          <SafeAreaView style={{ flex: 1, backgroundColor: "#fff" }}>
            <View
              style={[
                styles.drawer,
                {
                  width: DRAWER_WIDTH,
                  left: -DRAWER_WIDTH
                }
              ]}
            >
              {drawerContent ? drawerContent : this.drawerFallback()}
            </View>
            <Animated.View
              style={[
                styles.container,
                {
                  opacity: fadeAnim
                }
              ]}
            >
              {children}
            </Animated.View>
          </SafeAreaView>
        </Animated.View>
      )
    }

    return (
      <Animated.View style={[animated, styles.main]}>
        <View
          style={[
            styles.drawer,
            {
              width: DRAWER_WIDTH,
              left: -DRAWER_WIDTH
            }
          ]}
        >
          {drawerContent ? drawerContent : this.drawerFallback()}
        </View>
        <Animated.View
          style={[
            styles.container,
            {
              opacity: fadeAnim
            }
          ]}
        >
          {children}
        </Animated.View>
      </Animated.View>
    )
  }

  renderOverlay = () => {
    const { children, drawerContent, drawerPercentage } = this.props
    const { fadeAnim } = this.state
    const animated = { transform: [{ translateX: this.leftOffset }] }
    const DRAWER_WIDTH = SCREEN_WIDTH * (drawerPercentage / 100)

    if (isIOS && VERSION >= 11) {
      return (
        <SafeAreaView style={styles.main}>
          <Animated.View
            style={[animated, styles.drawer, { width: DRAWER_WIDTH, left: -DRAWER_WIDTH }]}
          >
            {drawerContent ? drawerContent : this.drawerFallback()}
          </Animated.View>
          <Animated.View style={[styles.container, { opacity: fadeAnim }]}>
            {children}
          </Animated.View>
        </SafeAreaView>
      )
    }

    return (
      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <Animated.View
          style={[
            animated,
            styles.drawer,
            {
              width: DRAWER_WIDTH,
              left: -DRAWER_WIDTH
            }
          ]}
        >
          {drawerContent ? drawerContent : this.drawerFallback()}
        </Animated.View>
        <Animated.View
          style={[
            styles.container,
            {
              opacity: fadeAnim
            }
          ]}
        >
          {children}
        </Animated.View>
      </View>
    )
  }

  render() {
    const { overlay } = this.props

    return overlay ? this.renderOverlay() : this.renderPush()
  }
}

MenuDrawer.defaultProps = {
  open: false,
  drawerPercentage: 60,
  animationTime: 200,
  overlay: true,
  opacity: 0.4
}

MenuDrawer.propTypes = {
  open: PropTypes.bool,
  drawerPercentage: PropTypes.number,
  animationTime: PropTypes.number,
  overlay: PropTypes.bool,
  opacity: PropTypes.number
}

const styles = StyleSheet.create({
  main: {
    position: "absolute",
    left: 0,
    width: SCREEN_WIDTH + 60,
    top: 5,
    zIndex: 0
  },
  container: {
    position: "absolute",
    left: 0,
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    zIndex: 0
  },
  drawer: {
    position: "absolute",
    left: -60,
    width: 60,
    height: SCREEN_HEIGHT,
    zIndex: 1
  }
})

export default MenuDrawer

products.js

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableHighlight,
  Image,
  TextInput
} from 'react-native';
import FormData from 'FormData';
import styles from './../../src/assets/styles/style';
import REQUEST from './../../src/HTTP/REQUEST';
import MenuDrawer from './menu/MenuDrawer';

var DATA;
var Drwaer;
class Products extends Component {

  constructor(props) {
    super(props) 
    menuDrawer=new MenuDrawer();
  }


  static navigationOptions = ({ navigation }) => {
    return {
      title: `Create Account `,
    }
  };
//${navigation.state.params.screen}

goToHome= () =>
{
   this.props.navigation.navigate('Home');
}

goToHomemenuDrawer=()=>{
  menuDrawer.openDrawer();

}

  render() {
    const { state, navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <TouchableHighlight
             onPress = { this.goToHomemenuDrawer }
             >
              <Text
                style={styles.loginButton}>openDrawer
                </Text>
        </TouchableHighlight>
      </View>
    );
  }
}

export default Products;

App.js

import React, {Component} from 'react';

import { StyleSheet, Text, View, Button } from 'react-native';

import { createStackNavigator, createAppContainer } from "react-navigation";
import login from './src/componets/Login';
import createAccount from './src/componets/CreateAccount';
import products from './src/componets/Products';
import MenuDrawer from './src/componets/menu/MenuDrawer';

const RootStack = createStackNavigator(
  {
    Home: login,
    CreateAccount: createAccount,
    Products: products
 },
  {
    initialRouteName: "Home",
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
      },
      screenInterpolator: sceneProps => {
                const {layout, position, scene} = sceneProps;
                const {index} = scene;

                const width = layout.initWidth;
                const translateX = position.interpolate({
                    inputRange: [index - 1, index, index + 1],
                    outputRange: [width, 0, 0],
                });

                const opacity = position.interpolate({
                    inputRange: [index - 1, index - 0.99, index],
                    outputRange: [0, 1, 1],
                });

                return {opacity, transform: [{translateX: translateX}]};
            },
    })
  }
);

export default createAppContainer(RootStack);