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

Question

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

我正在寻找一种解决方案，在该解决方案中，我可以从特定堆栈访问TabStack中的这些变量，因此当我在MessagesStack中调用API，并且出现新的消息时，我可以更新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

这里有三种更新选项卡中图标的解决方案

1. 首先，将Tab图标创建为功能组件，然后可以绑定带有redux的API，一旦redux被更新，它将更新选项卡图标组件，使用redux上下文

2. 使用全局应用上下文。例如，在主应用程序上下文中创建一个状态并更新该上下文一旦API调用完成，它将自动更新您的选项卡组件

3. 激发选项卡组件的本地通知和更新日期(不是推荐(