javascript - 如何更新子堆栈？

Question

我有一个包含 TabBarStack 的 AppContentStack，我希望在更改应用程序语言时更改选项卡的标题。当我更改应用程序自定义 reducer 时，会在 AppContainer 上调用订阅，然后重新加载 AppContentStack 而不是 TabBarStack。有没有办法实现标签的重新加载？

我的代码:

function TabBarStack() {
return (
    <Tab.Navigator
        tabBarOptions={{
            activeTintColor: textRedColor,
            inactiveTintColor: grayColor,
            style: {
                backgroundColor: "white"
            }
        }}>
        <Tab.Screen name="Home"
                    component={ContentScreen}
                    options={{
                        tabBarLabel: getTranslation('Home'),
                        tabBarIcon: ({color, size}) => (
                            <HomeSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Promotions"
                    component={PromotionsScreen}
                    options={{
                        tabBarLabel: getTranslation('Promotions'),
                        tabBarIcon: ({color, size}) => (
                            <PromotionsSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Deposit"
                    component={PromotionsScreen}//TODO: missing
                    options={{
                        tabBarLabel: getTranslation('Deposit'),
                        tabBarIcon: ({color, size}) => (
                            <DepositSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
        <Tab.Screen name="Settings"
                    component={SettingsStack}
                    options={{
                        tabBarLabel: 'Settings!!',//TODO: missing translation
                        tabBarIcon: ({color, size}) => (
                            <SettingsSVG style={styles.iconStyle} color={color}/>
                        ),
                    }}/>
    </Tab.Navigator>
);
}

function AppContentStack() {
return (
    <Stack.Navigator
        initialRouteName="TabBarStack"
        headerMode="screen"
        mode="modal">
        <Stack.Screen name="TabBarStack"
                      component={TabBarStack}
                      options={{ header: headerView }}
        />
        <Stack.Screen name="GameWebView"
                      component={GameWebViewScreen}
                      options={{
                          header: ({navigation}) => {
                              return (
                                  <StatusBarComponent closeButtonAction={() => closeWebView(navigation)}
                                                      showCloseButton={true}/>
                              );
                          }
                      }}
        />
    </Stack.Navigator>
);
}

function PreLoginStack() {
return (
    <Stack.Navigator
        ...
    </Stack.Navigator>
);
}

function AppContainer({player}) {
return <NavigationContainer>
    {!player ?
        PreLoginStack()
        :
        AppContentStack()
    }
</NavigationContainer>;
}

export default subscribe(state => ({
    player: state.player,
    languageLocale: state.languageLocale
}))(AppContainer);

Answer 1

尝试直接连接 TabBarStack 以进行订阅，以便进行更新:

export subscribe(state => ({
    player: state.player,
    languageLocale: state.languageLocale
}))(TabBarStack);