У меня есть AppContentStack, содержащий TabBarStack, и я хочу, чтобы названия вкладок менялись при смене языка приложения. Когда я изменяю приложение, пользовательский редуктор вызывает подписку на 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);