React Navigation StackNavigator和TabNavigator Headers 绑定到Redux-Java 学习之路

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

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

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

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);

回复于 2024-04-29T13:29:49+08:00

React Navigation StackNavigator和TabNavigator Headers 绑定到Redux

1 回答

相关问题