添加 contentComponent 后，React Navigation 抽屉变为空白

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

我关注this tutorial

Answer 1

您没有向 CustomDrawer 发送道具。试试下面的代码。

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

Answer 2

抽屉.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 />
    }
)

这应该可以在安卓设备上测试