React Navigation StackNavigator 和 TabNavigator 标题绑定到 Redux答案

【问题标题】：React Navigation StackNavigator and TabNavigator title binding to ReduxReact Navigation StackNavigator 和 TabNavigator 标题绑定到 Redux
【发布时间】：2018-02-08 22:01:23
【问题描述】：

我正在尝试将 StackNavigator 和 TabNavigator 屏幕标题绑定到 Redux。问题是似乎不可能在 TabNavigator 或 StackNavigator 中使用支持 Redux 的组件作为标题。

我尝试将 setParams 与 TabNavigator 一起使用，但它似乎不起作用。

我正在开发一个使用 Redux 加载字符串资源的多语言应用程序，但是因为我无法使用 AsyncStorage 加载 Reducer 的初始状态，所以我最初无法分配当前字符串资源，所以我没有不必使用 setParams 或任何东西。

【问题讨论】：

标签： react-native redux react-navigation

【解决方案1】：

我设法通过创建一个连接到 Redux 的 ConnectedLabel 组件来解决这个问题，然后通过以下方式将其添加到 TabNavigator 屏幕：

static navigationOptions = {
    tabBarLabel: <ConnectedLabel textKey='search_tab2_title' />
}

这是 ConnectedLabel 组件：

import { connect } from 'react-redux';

export const LABEL_TYPE_STACK = 'label_type_stack';
export const LABEL_TYPE_TAB = 'label_type_tab';

const ConnectedLabel = props => {
    const { culture, type } = props;
    return <Text style={type === LABEL_TYPE_STACK ? widgetStyles.headerTitle : widgetStyles.tabLabel} numberOfLines={1}>{culture.strings[props.textKey]}</Text>
}

const widgetStyles = StyleSheet.create({
    tabLabel: {
        fontSize: dimens.textSizeSemiMedium,
        paddingBottom: Platform.OS === 'ios' ? 12 : 0,
    },
    headerTitle: {
        color: 'white',
        fontSize: dimens.textSizeMedium
    }
})

const mapStateToProps = (state) => {
    return {
        culture: state.culture
    }
}

export default connect(mapStateToProps)(ConnectedLabel);

【讨论】：