React Native：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：对象

Question

我正在尝试将标题标题更改为图像，但无法正常工作。我尝试过的是使用 LogoTitle 类在我的 Top Tab Navigator 中呈现图像而不是标题，隐藏标题并呈现标题也可以：

TopNavigator.navigationOptions = {
        headerTitle:'test'
};

然后我尝试将其更改为图像：

TopNavigator.navigationOptions = () =>{
    headerTitle:<LogoTitle/>
};

我使用最新的 Expo SDK

这是我的完整代码：

import React from 'react';
import { createStackNavigator, createMaterialTopTabNavigator } from 'react-navigation';

import TabBarIcon from '../components/TabBarIcon';
import PartyScreen from '../screens/PartyScreen';
import EventScreen from '../screens/EventScreen';
import FestivalScreen from '../screens/FestivalScreen';
import ActivityScreen from '../screens/ActivityScreen';
import TestScreen from '../screens/TestScreen';

class LogoTitle extends React.Component {
    render() {
        return (
        <Image
            source={require('../assets/images/Header_Logo.png')}
            style={{ width: '100%', height: '100%', resizeMode: 'center', backgroundColor: 'black' }}
        />
        );
    }
}

const PartyStack = createStackNavigator({
    Party: PartyScreen,
});

PartyStack.navigationOptions = {
    tabBarLabel: "Partys",
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
                'md-calendar'
            }
        />
    ),
};

const EventStack = createStackNavigator({
    Event: EventScreen,
});

EventStack.navigationOptions = {
    tabBarLabel: 'Events',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
            'md-calendar'
            }
        />
    ),
};

const FestivalStack = createStackNavigator({
    Festival: FestivalScreen,
});

FestivalStack.navigationOptions = {
    tabBarLabel: 'Festivals',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
            'md-calendar'
            }
        />
    ),
};

const ActivityStack = createStackNavigator({
    Activity: ActivityScreen,
});

ActivityScreen.navigationOptions = {
    tabBarLabel: 'Activiteit',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
            'md-calendar'
            }
        />
    ),
};

const TestStack = createStackNavigator({
    Test: TestScreen,
});

TestScreen.navigationOptions = {
    tabBarLabel: 'Test',
    tabBarIcon: ({ focused }) => (
        <TabBarIcon
            focused={focused}
            name={
            'md-calendar'
            }
        />
    ),
};

const TopNavigator = createMaterialTopTabNavigator({
    PartyStack,
    EventStack,
    FestivalStack,
    ActivityStack,
    TestStack
}, {
    tabBarOptions: {
      activeTintColor: '#5B71F9',
      inactiveTintColor: '#888888',
      showIcon: false,
      labelStyle: {
        fontSize: 14
      },
      scrollEnabled : true,
      style: {
        backgroundColor: '#fff',
        shadowColor: '#fff',
        shadowOffset: {
          width: 0,
          height: 0,
        },
        shadowOpacity: 0,
        shadowRadius: 0,
        elevation: 0,
        height: 47,
        borderBottomWidth: 1,
        borderBottomColor: '#E8E8E8'
      },
      indicatorStyle: {
        height: 2,
        backgroundColor: '#5B71F9'
      },
    }, 

},  navigationOptions = {
        header:{visible:false}
});

TopNavigator.navigationOptions = {
     headerTitle:<LogoTitle/>
};

export default TopNavigator;

我不明白为什么它会渲染文本但图像不会，我猜它与括号有关

Answer 1

试试这个：

    const RouteConfigs = {
      // Your routes
    };

    const StackNavigatorConfig = {
     navigationOptions: {
        header: (navigation) => ({
              title: ( <LogoTitle navigation={navigation} /> )
            })
      },
    };

export default createStackNavigator(RouteConfigs, StackNavigatorConfig);