从函数 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 组件传递给导航选项中的标题，而它应该是一个字符串。我认为你需要使用 headerTitle 来实现你想要的

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

来自文档

标题

可用作 headerTitle 的后备字符串。此外，将用作 tabBarLabel 的后备（如果嵌套在 TabNavigator）或drawerLabel（如果嵌套在DrawerNavigator中）。

标题标题

标头使用的字符串、React 元素或 React 组件。默认为场景标题。当一个组件被使用时，它接收 allowFontScaling、style 和 children 道具。标题字符串被传递 在儿童中。