【问题标题】:How to update substack?如何更新子堆栈?
【发布时间】:2020-04-07 13:25:37
【问题描述】:

我有一个包含 TabBarStack 的 AppContentStack,我希望在更改应用程序的语言时更改选项卡的标题。当我更改应用程序自定义减速器调用 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);

【问题讨论】:

  • 您使用什么库进行翻译?
  • @B.Mohammad 没有库,只是为翻译键选择正确翻译的字符串字典
  • languageLocale 触发语言加载的道具吗?
  • @B.Mohammad 是的,我测试了它,它有效,因为 AppContentStack() 被调用
  • 直接连接 TabBarStack 订阅怎么样?

标签: javascript react-native react-navigation react-navigation-stack


【解决方案1】:

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

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

【讨论】:

  • 但是不要忘记把它放在自己的文件中,这样它就是一个组件
猜你喜欢
  • 1970-01-01
  • 2021-06-27
  • 2013-05-04
  • 2022-01-14
  • 2013-05-13
  • 2019-07-24
  • 2020-02-13
  • 1970-01-01
  • 2018-03-31
相关资源
最近更新 更多