有没有一种方法可以使用反应导航在 header 图像 + 文本中插入并居中？

Question

我正在尝试在我的 header 中插入照片和文本，使用 React Native 应用程序的 React 导航。

为此，我尝试了几种方法。都失败了。对于我之前的镜头，我尝试创建一个包含我的图像和文本的 React 组件，然后将其用作导航选项（下面的代码）中的 'title'。

// 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/>
            }
        },

但不幸的是，我得到了这个错误："Error: Invalid title for route "Page1" - 标题必须是字符串或空值，而不是类型 object"。

我明白了错误信息，这种做法可能是不可能的。你们知道怎么做吗？

谢谢！

Answer 1

使用headerTitle代替标题

navigationOptions: {
  headerTitle: <ImageHeader/>,
}

有没有一种方法可以使用反应导航在 header 图像 + 文本中插入并居中？

Is there a way to insert and centered in the header an image + a text, using react navigation?

reactjs

react-native

react-native-navigation

react-navigation