我希望能够根据某些条件从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,但不确定是否可以使用此代码结构吗?