修复Invariant违​​反元素类型无效：检查`DrawerMenu`的渲染方式

Question

在运行使用RN 0.54.0的旧项目时，我遇到了这个问题

这是我的package.json依赖项

        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "fetchival": "^0.3.2",
        "lodash": "^4.17.4",
        "moment": "^2.20.1",
        "prop-types": "^15.6.0",
        "react": "16.5.0",
        "react-native": "^0.54.0",
        "react-native-camera": "1.0.1",
        "react-native-charts-wrapper": "^0.4.1",
        "react-native-check-box": "^2.0.2",
        "react-native-fetch-blob": "^0.10.8",
        "react-native-image-crop": "^1.0.2",
        "react-native-image-crop-picker": "^0.19.2",
        "react-native-image-picker": "^0.26.7",
        "react-native-image-preview": "^0.3.1",
        "react-native-image-resizer": "^1.0.0",
        "react-native-image-zoom-viewer": "^2.0.20",
        "react-native-material-ui": "^1.30.1",
        "react-native-progress": "^3.4.0",
        "react-native-svg": "^5.5.1",
        "react-native-vector-icons": "^4.5.0",
        "react-navigation": "^1.0.3",
        "react-redux": "^5.0.6",
        "redux": "^3.7.2",
        "redux-persist": "^5.5.0",
        "redux-thunk": "^2.2.0",
        "superagent": "^3.8.2",
        "victory-native": "^0.16.6"

这是我的使用React-redux从AppRoot.js加载的Navigator.js

import React from 'react';
import { Dimensions, Platform,View,Text } from 'react-native';
import { DrawerNavigator, StackNavigator } from 'react-navigation';

import CustomDrawer from '../components/layouts/CustomDrawer';

import HomeScreen from '../screens/HomeScreen';

import GlossaryScreen from '../screens/GlossaryScreen';
import ChangePasswordScreen from '../screens/ChangePasswordScreen';

const drawerWidth = Dimensions.get('window').width - (Platform.OS === 'android' ? 86 : 94);

const HomeStack = StackNavigator({
    Home: {
        screen: HomeScreen,
    },
    ClusterMenu: {
        screen: myAnotherStack,
    },
    MangroveMenu: {
        screen: myAnotherStack,
    },
}, {
    headerMode: 'none',
});

const Navigator = DrawerNavigator({
    Home: {
        screen: HomeStack,
    },
    Info: {
        screen: myAnotherStack,
    },
    Forum: {
        screen: myAnotherStack,
    },
    Istilah: {
        screen: GlossaryScreen,
    },
    ChangePassword: {
        screen: ChangePasswordScreen,
    },
}, 
{ 
    contentComponent: (props) => (<CustomDrawer {...props} />),    
    drawerWidth,
}
);

export default Navigator;

我正在尝试修改contentComponent，但仍然存在错误。

import React from 'react';
import { Dimensions, Platform,View,Text } from 'react-native';
import { DrawerNavigator, StackNavigator } from 'react-navigation';

import HomeScreen from '../screens/HomeScreen';

import GlossaryScreen from '../screens/GlossaryScreen';
import ChangePasswordScreen from '../screens/ChangePasswordScreen';

const drawerWidth = Dimensions.get('window').width - (Platform.OS === 'android' ? 86 : 94);

const HomeStack = StackNavigator({
    Home: {
        screen: HomeScreen,
    },
    ClusterMenu: {
        screen: myAnotherStack,
    },
    MangroveMenu: {
        screen: myAnotherStack,
    },
}, {
    headerMode: 'none',
});

const Navigator = DrawerNavigator({
    Home: {
        screen: HomeStack,
    },
    Info: {
        screen: myAnotherStack,
    },
    Forum: {
        screen: myAnotherStack,
    },
    Istilah: {
        screen: GlossaryScreen,
    },
    ChangePassword: {
        screen: ChangePasswordScreen,
    },
}, 
{ 
    contentComponent: (props) =>  (<View><Text>asdasd</Text></View>),    
    drawerWidth,
}
);

export default Navigator;

显示这样的错误。

This error is located at:
  in Unknown (created by Connect(Component))
  in Connect(Component) (at SceneView.js:17)
  in SceneView (at CardStack.js:566)
  in RCTView (at View.js:78)
  in VIew (at createAnimatedComponent.js:147)

这是我的Homescreen.js

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { View, Text, StyleSheet } from 'react-native';

import ContainerHOC from '../core/ContainerHOC';
import ButtonWhite from '../components/ButtonWhite';

import * as clustersActionCreators from '../data/clusters/actions';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 25,
        paddingRight: 25,
    },
    headingTextContainer: {
        marginBottom: 30,
    },
    headingText: {
        fontSize: 30,
        color: '#676767',
    },
});

@connect(
    state => ({
        menu: state.clusters.menu,
    }),
    dispatch => ({
        actions: bindActionCreators(clustersActionCreators, dispatch),
    }),
)
@ContainerHOC({ header: { left: 'menu', center: 'Beranda', destination: 'DrawerToggle' } })
export default class HomeScreen extends Component {
    static propTypes = {
        menu: PropTypes.arrayOf(PropTypes.shape({})),
        navigation: PropTypes.shape({
            navigate: PropTypes.func,
        }),
    }

    static defaultProps = {
        menu: [],
        navigation: {
            navigate: () => {},
        },
    }

    static _titleFormater(text) {
        const arrText = text.split(' ');

        if (arrText.length > 1) {
            return `${arrText[0]} ${arrText[1].toUpperCase()}`;
        }

        return text;
    }

    componentWillMount() {
        const { key } = this.props.navigation.state;

        this.props.actions.setHomeKey(key);
    }

    render() {
        const { navigation, menu } = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.headingTextContainer}>
                    <Text style={styles.headingText}>
                        Lakukan pengisian data petak dan mangrove anda.
                    </Text>
                </View> 
                {
                    menu.length > 0 &&
                    menu.map((cluster) => {
                        if ('petak' in cluster && cluster.petak.length > 0) {
                            return cluster.petak.map(petak => (
                                <ButtonWhite
                                    key={petak.petak_id}
                                    text={this.constructor._titleFormater(petak.name || 'Petak')}
                                    pressEvent={() => {
                                        navigation.navigate((petak.type.toLowerCase() === 'swath' ? 'ClusterMenu' : 'MangroveMenu'), (Object.keys(petak).length > 0 ? petak : { name: (petak.type.toLowerCase() === 'swath' ? 'Petak' : 'Mangrove') }));
                                    }}
                                />
                            ));
                        }

                        return null;
                    })
                }
            </View>
        );
    }
}

这应该加载我的HomeScreen /仪表板屏幕。谢谢！