Есть ли способ вставить и отцентрировать в заголовке изображение + текст, используя реагирующую навигацию? - PullRequest
Новая
       22

Есть ли способ вставить и отцентрировать в заголовке изображение + текст, используя реагирующую навигацию?

0 голосов
/ 18 июня 2019

Я пытаюсь вставить в заголовок фотографию и текст, используя навигацию по реагированию для собственного приложения реагирования.

Для этого я попробую пару вещей.Все не удалось.Для моего предыдущего снимка я попытался создать компонент 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 »- заголовок должен быть строковым или нулевым, вместо этого он должен был иметь тип объекта».

Я понимаю сообщение об ошибке, такой способ, вероятно, невозможен.Ребята, вы не знаете, как это сделать?

Спасибо!

1 Ответ

2 голосов
/ 18 июня 2019

Используйте headerTitle вместо заголовка 

navigationOptions: {
  headerTitle: <ImageHeader/>,
}

header

...