添加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

我正在关注this tutorial

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设备上进行测试