如何更新子堆栈

Question

我有一个包含TabBarStack的AppContentStack，我希望在更改应用程序的语言时更改选项卡的标题。当我更改应用程序时，自定义reducer会调用AppContainer上的subscribe，然后它会重新加载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);