有没有办法使用反应导航在标题中插入图像+文本并将其居中？答案

【问题标题】：Is there a way to insert and centered in the header an image + a text, using react navigation?有没有办法使用反应导航在标题中插入图像+文本并将其居中？
【发布时间】：2019-11-01 07:42:47
【问题描述】：

我正在尝试使用 react 导航在我的标题中插入照片和文本，用于反应原生应用程序。

为此，我尝试了几件事。都失败了。对于我之前的镜头，我尝试创建一个包含我的图像和文本的 React 组件，然后在 navigationOptions 中将其用作“标题”（代码如下）。

// this is my component page
import React from 'react'
import { Image, StyleSheet, View, Text } from 'react-native'

export default class ImageHeader extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <Image
                    style={styles.image}
                    source={require('../../assets/pic.png')}
                    resizeMode='contain'
                />
                <Text style={styles.text}>
                    Title_Page1
                </Text>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },

    image: {
        width: 25,
        height: 25,
        zIndex: 999
    },

    text: {
        fontSize: 12
    }

})

// and then, in my navigation page:

        Page1: {
            screen: Page1,
            navigationOptions: {
                title: <ImageHeader/>
            }
        },

但不幸的是，我收到了这个错误：“错误：路由“Page1”的标题无效 - 标题必须是字符串或 null，而不是对象类型”。

我理解错误信息，这种方式可能是不可能的。你们知道怎么做吗？

谢谢！

【问题讨论】：

标签： reactjs react-native react-navigation react-native-navigation

【解决方案1】：

使用headerTitle 代替标题

navigationOptions: {
  headerTitle: <ImageHeader/>,
}

【讨论】：