Question

我正在尝试将StackNavigator和TabNavigator屏幕标题绑定到Redux。问题是，使用TabNavigator或StackNavigator对标题使用Redux感知组件似乎是不可能的。

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

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

Answer 1

我设法通过创建 ConnectedLabel 组件来解决此问题，该组件连接到Redux，然后按以下方式将其添加到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);

React Navigation StackNavigator和TabNavigator标题绑定到Redux

1 个答案: