React Native：未将自定义标头设置为标头导航

Question

我在android react native项目中创建了顶级导航器：

const topSurvayorsNavigator = createMaterialTopTabNavigator({
    ActiveSurveyor: {
        screen: MomayezanScreen,
        params: { status: 1 },
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 12, fontFamily: 'IranianSans' }}>ممیزان فعال</Text>,
            tabBarIcon: (tabInfo => {
                return (
                    <Icon name="stars" size={15} color={tabInfo.tintColor} />
                );
            })
        },
    },
    DeActiveSurveyor: {
        screen: MomayezanScreen,
        params: { status: 0 },
        navigationOptions: {
            tabBarLabel: <Text style={{ fontSize: 12, fontFamily: 'IranianSans' }}>ممیزان غیرفعال</Text>,
            tabBarIcon: (tabInfo => {
                return (
                    <Icon name="md-stars" size={15} color={tabInfo.tintColor} />
                );
            })
        },

    }
}, {
    swipeEnabled: true,
    tabBarOptions: {
        labelStyle: {
            fontSize: 12
        },
        activeTintColor: Colors.darkGray
    }
});

之后，我将topSurvayorsNavigator添加到主堆栈导航器中：

const AuditMomayezanNavigator = createStackNavigator({
    Dashboard: DashboardScreen,
    ListSurveyor: {
        screen: topSurvayorsNavigator,
    },
    Detail: SurveyorDetailsScreen,
}, {
    defaultNavigationOptions: defaultNavOptions
});

最后：

export default createAppContainer(AuditMomayezanNavigator);

根据参数在MomayezanScreen中，我将不同的数据加载到列表中。在页面中，我想设置自定义标题，所以我要这样做：

MomayezanScreen.navigationOptions = ({ navigation }) => {
    const statusId = navigation.getParam('status');
    console.log(statusId);
    return {
        header: () => <CustomHeader
            title={`ممیزان ${statusId === 0 ? 'غیر فعال' : 'فعال'}`} />
    }
} 

但是很遗憾，没有任何改变，并且标题没有任何标题。

实际上未在标头组件中设置coustom标头！！！！你的想法是什么？

我将MomayezanScreen.navigationOptions更改为此：

MomayezanScreen.navigationOptions = ({ navigation }) => {
    const statusId = navigation.getParam('status');
    console.log(statusId);
    return {
        headerTitle: `test`
    }
}

但是仍然没有任何内容打印在标题上。

Answer 1

您正在MomayezanScreen内部的createMaterialTopTabNavigator中设置标题。您只能在createStackNavigator内部的屏幕中设置标题。

这在React Navigation文档中有详细解释：https://reactnavigation.org/docs/en/navigation-options-resolution.html