Получить строковый результат из функции React Native

Question

Я создал компонент, который подключается к redux и возвращает текущее загруженное имя item's в качестве заголовка навигации.

Но когда я пытаюсь получить заголовок из этого компонента, он выходит из строя с этой ошибкой:

Error: `title` cannot be defined as a function in navigation options for `StockScreen` screen. 

Try replacing the following:
{
    title: ({ state }) => state...
}

with:
({ navigation }) => ({
    title: navigation.state...
})

Это мой компонент:

import { connect } from 'react-redux';

let Title = () => {
    if(this.props.item === null || this.props.item === undefined, this.props.item === {}) {
        return '';
    }else{
        return this.props.item.TradeName;
    }
}

const mapStateToProps = state => ({
    item: state.stockItem.item,
});

export default ConnectedTitle = connect(mapStateToProps)(Title);

И вот как я пытался реализовать это в моем стеке реагирующей навигации:

const Stack = createStackNavigator(
    {
        Home: {
            screen: Tabs,
            navigationOptions: {
                header: null,
            },
        },
        StockModal: {
            screen: StockModal,
            navigationOptions: {
                header: null,
            },
        },
        StockScreen: {
            screen: StockScreen,
            navigationOptions: {
                headerRight: (<ConnectedSaveButton/>),
                title: ConnectedTitle,
            },
        },
    },
    {}
);

Answer 1

Вы передаете React Component заголовку в опциях навигации, в то время как он должен быть строкой. Я думаю, вам нужно использовать headerTitle для достижения того, что вы хотите

StockScreen: {
    screen: StockScreen,
    navigationOptions: {
        headerRight: (<ConnectedSaveButton/>),
        headerTitle: (<ConnectedTitle />),
    },
}

Из документации

title

Строка, которая может использоваться как запасной вариант для headerTitle. Кроме того, будет использоваться в качестве запасного варианта для tabBarLabel (если он вложен в TabNavigator) или pocketLabel (если они вложены в DrawerNavigator).

headerTitle

String, React Element или React Component, используемый в заголовке. По умолчанию используется заголовок сцены. Когда компонент используется, он получает allowFontScaling, стиль и детский реквизит. Строка заголовка передается у детей.