React-native-box перестает работать, когда используется функция connect () из response-redux

Question

Я использую упаковку с реагирующим ящиком. Я могу открыть и закрыть ящик с помощью ссылки. Я делаю это из другого класса. Работает нормально. Тем не менее, когда я использую функцию подключения, я получаю сообщение об ошибке: «undefined не является объектом (оценивает this.drawer.open») ».

это происходит только когда я использую connect ()

другие вопросы указывают на использование {forwardRef: true} в соединении (mapStateToProps, null, null, {forwardRef: true})

это не имеет никакого эффекта

Я новичок в реакции на родной язык и не могу решить эту проблему с помощью forwardRef, пожалуйста, помогите !!

примечание: код работает правильно, если не используется избыточность

app.js

import React from 'react';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import { createAppContainer, createBottomTabNavigator, 
createStackNavigator, createSwitchNavigator } from 'react- 
navigation';
import { Provider } from 'react-redux';
import { store } from './src/redux/store/store';
import Drawer from 'react-native-drawer';
import Ionicons from 'react-native-vector-icons/Ionicons';

import FeedDrawerScreen from 
'./src/screens/drawer/feedDrawerScreen';

import eventScreen from './src/screens/main/eventScreen';
import feedScreen from './src/screens/main/feedScreen';
import mediaScreen from './src/screens/main/mediaScreen';
import profileScreen from './src/screens/main/profileScreen';
import queryScreen from './src/screens/main/queryScreen';

import profileDetailScreen from 
'./src/screens/stack/profileDetailScreen';
import questionDetailScreen from 
'./src/screens/stack/questionDetailScreen';


const drawerStyles = {
  drawer: { shadowColor: '#000000', shadowOpacity: 1, 
   shadowRadius: 10,  borderRightWidth: 1, borderRightColor: 
  '#e6e6e6'},
main: {paddingLeft: 0},
}


const feedStack = createStackNavigator(
{
  feed: {
    screen: feedScreen,
    navigationOptions: () => ({
      headerTitleStyle: {fontSize: 18, fontWeight: '500'},
      title: 'Home',
      headerBackTitle: 'back',
    }),
  },
  questionDetail: {
    screen: questionDetailScreen,
    navigationOptions: () => ({
      headerTitleStyle: {fontSize: 18, fontWeight: '500'},
      title: 'Details',
      headerBackTitle: 'back',
    }),
  },
  profileDetail: {
    screen: profileDetailScreen,
    navigationOptions: () => ({
      headerTitleStyle: {fontSize: 18, fontWeight: '500'},
      title: 'Profile',
      headerBackTitle: 'back',
    }),
  },
},
{ 
  headerLayoutPreset: 'center',
}
);

const tabs = createBottomTabNavigator(
    {
      Home : feedStack,
      Media : mediaScreen,
      Question : queryScreen,
      Event : eventScreen,
      Profile : profileScreen,
    },
    {
    initialRouteName : 'Home',
    defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
    const { routeName } = navigation.state;
    let IconComponent = Ionicons;
    let iconName;
    if (routeName === 'Home') {
      iconName = 'ios-home'; 
    } else if (routeName === 'Media') {
      iconName = 'ios-images';
    } else if (routeName === 'Question') {
      iconName = 'ios-help';
    } else if (routeName === 'Event') {
      iconName = 'ios-calendar';
    } else if (routeName === 'Profile') {
      iconName = 'ios-person';
    }


    // You can return any component that you like here!
    return <IconComponent name={iconName} size={25} color= 
    {tintColor} />;
       },
     }),
    tabBarOptions: {
      activeTintColor: '#000000',
      labelStyle: {
        fontSize: 12,
      },
      showLabel: true,
    }
  }
);

const AppContainer = createAppContainer(tabs);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Drawer
        ref = {(ref) => {feedScreen._drawer = ref}}
        type="static"
        content={<FeedDrawerScreen />}
        tapToClose={true}
        openDrawerOffset={100}
        styles={drawerStyles}
        tweenHandler={Drawer.tweenPresets.parallax}
        >
          <View style={styles.maincontainer}>
            <StatusBar color='white' barStyle='dark-content'/>
            <AppContainer />
          </View>
        </Drawer>
      </Provider>
    );
  }
}

const styles = StyleSheet.create({
  maincontainer: {
    flex: 1,
  },
});

DrawerCode

<Provider store={store}>
    <Drawer
    ref = {(ref) => {feedScreen._drawer = ref}}
    type="static"
    content={<FeedDrawerScreen />}
    tapToClose={true}
    openDrawerOffset={100}
    styles={drawerStyles}
    tweenHandler={Drawer.tweenPresets.parallax}
    >
      <View style={styles.maincontainer}>
        <StatusBar color='white' barStyle='dark-content'/>
        <AppContainer />
      </View>
    </Drawer>
</Provider>

feedScreen.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { ScrollView, Image } from 'react-native';
import { connect } from 'react-redux';
import { Card } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';

class feedScreen extends React.Component {
    static navigationOptions = {
        headerLeft: (
            <Ionicons name='ios-menu' size={25} color='black'                 
   style={{marginLeft:15}} onPress={()=>{this._drawer.open()}}/>
    ),
    headerRight: (
        <View style={{flexDirection: 'row', marginRight:15}}>
            <Ionicons name='ios-search' size={25} color='black' />
            <Ionicons name='ios-notifications' size={25} 
    color='black' style={{marginLeft:15}}/>
        </View>
    ),
  };
  render() {
    return (
        <View style={styles.container}>
            <Text>feed screen</Text>
        </View>
    );
  }
}

const mapStateToProps = (state) =>{
    return {
        feed_list : state.main.feed
    }
}


 export default connect(mapStateToProps,null,null,{forwardRef: 
 true})(feedScreen);