Ящик React Navigation гаснет после добавления contentComponent

Question

Я использую React Navigation для создания пользовательского NavigationDrawer с заголовком сверху, вот так выглядит мой код

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

import AboutScreen from './modules/screens/About/index'
import ContactScreen from './modules/screens/Contact/index'
import HomeScreen from './modules/screens/Home/index'

import { createDrawerNavigator, DrawerItems } from "react-navigation";

import { Image, ScrollView, SafeAreaView, Dimensions } from 'react-native';

class NewDrawer extends Component {
    render() {

        return (
            <AppDrawer />
        );
    }
}
const AppDrawer = createDrawerNavigator({
    HomeScreen: HomeScreen,
    AboutScreen: AboutScreen,
    ContactScreen: ContactScreen,

},
    //Commenting below part makes my code work
    {
        contentComponent: CustomDrawer
    }
)
const CustomDrawer = (props) => (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={{ height: 150, backgroundColor: 'white' }}>
            <Image source={require('./modules/images/header.jpeg')}
                style={{ height: 120, width: 120 }}>
            </Image>
        </View>
        <ScrollView>
            <DrawerItems {...props}>

            </DrawerItems>
        </ScrollView>
    </SafeAreaView>
)

export default NewDrawer;

Если я удаляюcontentComponent я вижу свои элементы ящика.

Как получить заголовок с пользовательским элементом ящика?

Я использую: -

npm> v6.4.1

Узел> v8.12.0

реагировать на навигацию> v2.17.0

Я следую этому учебнику

Answer 1

Вы не отправляете реквизиты на CustomDrawer .Попробуйте код ниже.

contentComponent: props => <CustomDrawer {...props} />

Answer 2

Drawer.js

<SafeAreaView style={{ flex: 1 }}>
    <View style={{ height: 150, backgroundColor: 'white' }}>
        <Image source={require('./modules/images/header.jpeg')}
            style={{ height: 120, width: 120 }}>
        </Image>
    </View>
    <ScrollView>
        <DrawerItems {...props}>

        </DrawerItems>
    </ScrollView>
</SafeAreaView>

App.js

import CustomDrawer from './Drawer' // Import the file

const AppDrawer = createDrawerNavigator({
    HomeScreen: HomeScreen,
    AboutScreen: AboutScreen,
    ContactScreen: ContactScreen,

},
    {
        contentComponent: <CustomDrawer />
    }
)

Это должно работать проверено на устройстве Android