时间戳

首页 > 解决方案 > 添加 contentComponent 后，React Navigation 抽屉变为空白

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

问题描述

我正在使用 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

我正在关注本教程

标签： reactjsreact-nativereact-navigation

解决方案

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

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

推荐阅读