Question

我遇到一个问题，在尝试使用功能打开抽屉时，我的应用程序会给出错误消息。我能够从左侧滑入并且可以毫无问题地导航，但是一旦用户导航一次，openDraw函数将导致应用在Expo中重建，如果我再次尝试openDraw函数，则会收到错误消息 “未捕获的错误：未定义不是onPress @ cached-bundle-％experience的对象（评估'o.openDraw）” 任何帮助是极大的赞赏。下面代码的URL https://snack.expo.io/@anthonygt/b8ff2c

如果您只想查看代码，则在下面

App.js

import React, { Component } from 'react';
import DrawerNavigator from './src/components/DrawerNavigator';

export default class App extends Component {
  render() {
    return (
      <DrawerNavigator 
       />
    );
  }
}

DrawerNavigator

import React, { Component } from 'react';
import { Platform, Dimensions } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator, DrawerActions  } from 'react-navigation-drawer';
import StackNavigator from './StackNavigator'
import SettingsScreen from '../screens/SettingsScreen';
import HomeScreen from '../screens/HomeScreen';
import UserProfile from '../screens/UserProfile';

const MyDrawerNavigator = createDrawerNavigator ({
    Stack: { screen: StackNavigator},
    Dashboard: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
    Profile: { screen: UserProfile },
},

    {
        initialRouteName: 'Stack',
        drawerWidth: 300,
        drawerPosition: 'left',
    }
);

const AppContainer = createAppContainer(MyDrawerNavigator);

export default class DrawerNavigator extends Component {
    render() {
        return <AppContainer />;
    }
}

MyStackNavigator

import React, { Component } from 'react';
import { createStackNavigator, Header, } from 'react-navigation-stack'
import {createAppContainer} from 'react-navigation';
import { DrawerActions } from 'react-navigation-drawer';
import HomeScreen from'../screens/HomeScreen';
import UserProfile from '../screens/UserProfile';
import SettingsScreen from '../screens/SettingsScreen';

const MyStackNavigator = createStackNavigator(

{
    Home: HomeScreen,
    Profile: UserProfile,
    Settings: SettingsScreen,


},
{
    initialRouteName:'Home',
    defaultNavigationOptions:{
        title: 'app',
    }
}
);

const AppContainer = createAppContainer(MyStackNavigator);
export default class StackNavigator extends Component{
    render(){
        return <AppContainer screenProps={
            {openDraw: ()=> this.props.navigation.openDrawer()}       
    }/>;
    }
}

3个屏幕都相同，只是名称更改

import React, {useState, useEffect,Component} from 'react';
import {View, Text, FlatList, Image, StyleSheet, TouchableOpacity} from 'react-native';
import {Feather} from  '@expo/vector-icons';

    const HomeScreen = ({screenProps,navigation}) => {


    return (<View style={styles.container}>
        <Text>Home screen</Text>
        <TouchableOpacity  onPress={() => screenProps.openDraw()}> 
                <Feather style={styles.iconStyle} name ="menu"></Feather>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('Home')}>
                       <Text>Home</Text>
                    </TouchableOpacity>
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
                       <Text>Settings</Text>
                    </TouchableOpacity> 

            <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
                       <Text>Profile</Text>
                    </TouchableOpacity> 

 </View>
    );
};
const styles = StyleSheet.create({

    container: {
        marginTop:25,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    fontWeight: "bold",
    fontSize: 30,

    },


}); 
export default HomeScreen;

openDrawer反应本机未定义不是对象

0 个答案: