如何解决使用Mobx在react-native的底部标签导航V5中显示徽章编号
我是本机反应的新手,并且想在我的本机底部标签导航器中显示带有通知号的徽章。我想要像下面这样的东西:
https://cloud.githubusercontent.com/assets/1215843/24154227/8cf55b04-0e8b-11e7-8ce5-30aa00527824.png
我在我的react-native应用程序中使用mobx进行状态管理,在每个商店中,我都会有一个计算出的徽章计数值(显示在红色徽章图标内的数字)。
import { observable,action,flow } from "mobx";
export class DiscoverStore
{
@observable badgeCount = 0;
}
我的底部标签组件如下:
const Tab = createBottomTabNavigator();
export default TAB1 = () => {
const { trendingStore,DiscoverStore } = useStores();
return (
<Tab.Navigator style={{ height:50 }}
screenOptions={({ route }) => ({
headerShown: true,tabBarIcon: ({ focused,color,size }) =>
{
let iconName;
if (route.name === 'Trending') { iconName = focused ? 'home' : 'home-outline'; }
else if (route.name === 'Discover'){ iconName = focused ? 'crosshairs-gps' : 'crosshairs';}
else if (route.name === 'Favorites'){ iconName = focused ? 'heart' : 'heart-outline';}
else if (route.name === 'Profile'){ iconName = focused ? 'arrow-right-bold-box' : 'arrow-right-bold-box-outline' ;}
return <Icon name={iconName} size={25} color='rgb(68,68,68)' style={{ marginTop:5 }}/>;
},})}
tabBarOptions={{
keyboardHidesTabBar: true,activeTintColor: 'rgb(30,30,30)',inactiveTintColor: 'rgb(68,68)',//activeBackgroundColor:'',//inactiveBackgroundColor:'',style : { height:50 },tabStyle: { paddingVertical: 2,},labelStyle:
{
fontSize: 12,margin: 0,padding: 0,}}
>
<Tab.Screen name="Trending" component={STACK1}/>
<Tab.Screen name="Discover" component={STACK2}/>
<Tab.Screen name="Favorites" component={STACK3}/>
<Tab.Screen name="Profile" component={STACK4}/>
</Tab.Navigator>
);}
解决方法
您可以使用屏幕的 tabBarBadge 导航选项:
<Tab.Screen name="Discover" component={STACK2}
options={{tabBarBadge:(DiscoverStore.badgeCount>0?DiscoverStore.badgeCount:null)}}/>
React Navigation文档中的tabBarBadge:
https://reactnavigation.org/docs/tab-based-navigation/#add-badges-to-icons
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。