android - React Native:期望一个字符串(用于内置组件)或一个类/函数(用于复合组件)但得到:对象
问题描述
我正在尝试将标题标题更改为图像,但无法正常工作。我尝试过的是使用 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;
我不明白为什么它会渲染文本但图像不会,我想这与括号有关
解决方案
尝试这个:
const RouteConfigs = {
// Your routes
};
const StackNavigatorConfig = {
navigationOptions: {
header: (navigation) => ({
title: ( <LogoTitle navigation={navigation} /> )
})
},
};
export default createStackNavigator(RouteConfigs, StackNavigatorConfig);
推荐阅读
- johnsnowlabs-spark-nlp - Spark-NLP 预训练管道是否仅适用于 linux 系统?
- go - 我如何知道在 Kafka 中使用哪个分区?
- excel - 显示列中最后一个非空单元格的地址(如果值不唯一)
- apache-spark - 如何在没有 30 秒启动惩罚的情况下启动 spark 应用程序?
- python-3.x - 尝试从 RabbitMQ 消费时出现线程问题
- javascript - 使用 Angular 7 的 Tizen 可穿戴 Web 应用程序
- jenkins - 如何在不使用 UI 手动配置的情况下配置 Jenkins 在启动时启动作业
- c# - 发布时清除绑定属性
- c# - 使用 LINQ 将属性值与字典键匹配
- pivot-table - 合计类别但最大子项