在 React Native 应用程序中控制底部选项卡导航器的全局可访问变量

Question

我正在使用 @react-navigation/bottom-tabs 中的 createBottomTabNavigator 为我的应用程序制作一个漂亮的底部导航。我为选项卡栏图标添加了一些自定义通知指示器，用于说明特定堆栈中的“新闻”。如果变量是 true，这些图标（点）应该是可见的，否则点应该被隐藏。该变量将取决于堆栈的内容，因此如果 MessagesStack、unread_messages = true 等中有新的消息 ...

我正在寻找一种解决方案，我可以从特定堆栈访问我的 TabStack 中的这些变量，所以当我在 MessagesStack 中调用 API 并且有一个新的 message，我可以在 TabStack 中更新 unread_messages 并显示点。

我已将 TabStack 的完整代码粘贴到下面的 App.js 文件中：

TabStack = () => {

            StatusBar.setBarStyle("dark-content");
            const insets = useSafeAreaInsets();

            return (
                <View style={main_Styles.mainBackground}>
                    <View style={{ flex: 1, paddingBottom: insets.bottom,}} >
                        <View style={{ flex: 1}} >

                            <Tab.Navigator

                                screenOptions={({ route }) => ({

                                    tabBarIcon: ({ focused, color, size }) => {

                                        let iconOpacity = (focused) ? 1.0 : 0.2;
                                        let iconSize = 28;

                                        if (route.name === 'HomeStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='home_white' size={iconSize} opacity={iconOpacity}/>
                                                </View>
                                            );
                                        }

                                        if (route.name === 'MessagesStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='messages_white' size={30} opacity={iconOpacity}/>
                                                    {((unread_messages ?? 0) > 0) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3}} />}
                                                </View>
                                            );
                                        }

                                        if (route.name === 'GroupsStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='group_white' size={iconSize} opacity={iconOpacity}/>
                                                </View>
                                            );
                                        }

                                        if (route.name === 'NotificationsStack') {
                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <Icon name='notifications_white' size={iconSize} opacity={iconOpacity}/>
                                                    {((unread_notifications ?? 0) > 0) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3, marginTop: 1}} />}
                                                </View>
                                            );
                                        }

                                        if (route.name === 'MyProfileStack') {

                                            return (
                                                <View style={{alignItems: 'center'}}>
                                                    <View style={{marginTop: 3, flexDirection: 'row', width: 24, height: 24, borderRadius: 12, opacity: iconOpacity, borderColor: Main.colours.red_light, borderWidth: 0, overflow: 'hidden'}}>
                                                        <ProfileImage style={{flex: 1, backgroundColor: 'red'}} image_url={this.state.profile_image_url} initials={this.state.initials}/>
                                                    </View>
                                                    {(pending_friend_requests > 0 || pending_event_applications > 0 || pending_group_applications > 0 ) && <View style={{backgroundColor: Main.colours.yellow_medium, width: 6, height: 6, borderRadius: 3, marginTop: 2}} />}
                                                </View>
                                            )
                                        }
                                    },

                                    headerShown: false,
                                    lazy: false,
                                    optimizationsEnabled: false,
                                    animationEnabled: true,
                                    activeTintColor: Main.colours.white,
                                    showIcon: true,
                                    swipeEnabled: Platform.OS === 'ios' ? true : false,
                                    tabBarShowLabel: false,
                                    scrollEnabled: true,

                                    tabBarStyle: {
                                        backgroundColor: Main.colours.red_medium,
                                        borderTopWidth: 0,
                                        shadowOpacity: 0,
                                        elevation: 0,
                                        paddingTop: 0,
                                        paddingBottom: 0,
                                        height: 49,
                                    },

                                    tabBarIndicatorStyle: {
                                        backgroundColor: 'transparent',
                                    },

                                })}>

                                <Tab.Screen name="HomeStack" component={HomeStack} />
                                <Tab.Screen name="MessagesStack"  component={MessagesStack}/>
                                <Tab.Screen name="GroupsStack" component={GroupsStack}/>
                                <Tab.Screen name="NotificationsStack" component={NotificationsStack} />
                                <Tab.Screen name="MyProfileStack" component={MyProfileStack} />
                            </Tab.Navigator>
                        </View>
                    </View>
                </View>
            );
        }

Answer 1

这里有三种更新tab图标的方案

首先将Tab Icon创建为功能组件，然后就可以绑定了 API 与 redux，一旦 redux 更新，它会更新选项卡 icon 组件，使用 redux context
使用全局应用上下文。例如。在主应用上下文中创建一个状态并更新该上下文一旦您的 API 通话结束，它就会自动更新您的标签页组件
触发本地通知并更新选项卡组件的日期（不是推荐）

在 React Native 应用程序中控制底部选项卡导航器的全局可访问变量

Globally accessible variable to control Bottom Tab Navigator in React Native app

react-native

react-navigation-bottom-tab