是否有一种方法可以使用React导航在图片和文字中插入标题并居中？

Question

我正在尝试使用React本地应用程序的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，而应为object类型。”

我了解错误消息，这种方式可能是不可能的。你们有什么想法吗？

谢谢！

Answer 1

使用headerTitle代替标题

navigationOptions: {
  headerTitle: <ImageHeader/>,
}