Question

我希望能够根据某些条件从BottomTabNavigator中添加/删除徽章图标：

当相关标签突出时，徽章应清除
在其他屏幕上填写特定表格以及与此徽章相关的推送通知时，徽章应重新出现

不知道如何使用当前设置在createBottomTabNavigator中传递状态值或在createBottomTabNavigator中检索AsyncStorage值，或者这甚至是最佳实践，因为我不确定导航器中的状态是否会进行更新，因为该操作在技术上已经发生超出导航器范围？真的很困惑。

导航堆栈是在router.js中创建的

export const AppStack = createBottomTabNavigator({
    Bookings: {
        screen: BookingsScreen,
        navigationOptions: {
            tabBarLabel:"BOOKINGS",
            tabBarIcon: ({ tintColor }) => (
                <IconBadge
                    MainElement={<FontAwesome5Pro name={'inbox'} light size={24} color={tintColor} />}
                    BadgeElement={<FontAwesome5Pro name={'exclamation-circle'} light size={12} color='#1a1a1a' />}
                    Hidden={AsyncStorage.getItem('unreadNotifications') === '0' || AsyncStorage.getItem('unreadNotifications') === undefined}
                    IconBadgeStyle={{ 
                        backgroundColor: '#00cccc',
                        marginRight: -20,
                        marginTop: -15,
                    }}
                />
            )
        }
    },
    ...

然后由App.js调用这些堆栈：

export default createAppContainer(createSwitchNavigator(
    {
        ...
        App: AppStack,
        ...
    }
));

想法是更新一个值（例如AsyncStorage），该值将在屏幕处于焦点状态时触发徽标隐藏：

export default class BookingsScreen extends React.Component {
    constructor(props) {
        super(props);
        this._bootstrapAsync();
    }
    ...
    _bootstrapAsync = async () => {
        const setNotifications = await AsyncStorage.setItem('unreadNotifications', '0');
    };
}

传递和更新（全局值）可动态触发以更新徽章可见性的最佳方法是什么？

我知道screenProps和HOC，但不确定是否可以使用此代码结构吗？

添加/删除BottomTabBar标志图标

0 个答案: