基于屏幕上的操作，我想更新所选选项卡的图标（特别是图标上的表示“未读计数”的徽章装饰器），而无需进行导航以导致重新呈现。有哪些方法可以做到这一点？
下面是一个使用问题的基本演示的源代码标签模板的expo init，然后修改以证明：https://github.com/kevgrig/rn_navigation_badge_updates
这是该回购的小吃：https : //snack.expo.io/@git/github.com/kevgrig/rn_navigation_badge_updates
关键位是：
的createBottomTabNavigator在导航/ MainTabNavigator.js与tabBarIcon该返回S<TabBarIcon />分量并传递一个badgeCountPARAM。
let homeTabCount = 1;
HomeStack.navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({ focused }) => {
return (
<TabBarIcon
focused={focused}
name={
Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle'
}
badgeCount={homeTabCount}
/>
);
},
};
的TabBarIcon组分组分/ TabBarIcon.js带有可选badgeCountPARAM。
export default class TabBarIcon extends React.Component {
render() {
const { name, focused, badgeCount } = this.props;
return (
<View style={badgeStyles.badgeView}>
<Ionicons
name={name}
size={26}
style={{ marginBottom: -3 }}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
{ badgeCount > 0 && (
<View style={badgeStyles.badgeContainer}>
<Text style={badgeStyles.badgeText}>{badgeCount}</Text>
</View>
)}
</View>
);
}
}
一个Button在主屏幕画面/ HomeScreen.js与onPress处理程序，我想用哪个更新badgeCount主屏幕选项卡。
export default class HomeScreen extends React.Component {
onPress = () => {
// TODO - how to update the badgeCount?
}
我调试了的可用方法，props.navigation然后看到了，emit('refocus')但是没有用。
我用完成了react-redux。大概是这样的：
import { createStore, applyMiddleware } from 'redux';
import { connect, Provider } from 'react-redux';
const defaultState = {
badgeCount: 0,
};
const ACTION_REFRESH_STATE = "ACTION_REFRESH_STATE";
function rootReducer(state = defaultState, action) {
switch (action.type) {
case ACTION_REFRESH_STATE:
const result = Object.assign({}, state);
if (action.new_state.badgeCount) {
result.badgeCount = action.new_state.badgeCount;
}
return result;
default:
return state;
}
}
function refreshState(new_state) {
return {
type: ACTION_REFRESH_STATE,
new_state: new_state,
};
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
refreshState: (new_state) => {
dispatch(refreshState(new_state));
}
}
};
const store = createStore(rootReducer);
function routeToIcon(routeName) {
if (routeName.startsWith("Home")) {
return { iconName: "md-home", mapStateToProps: state => ({ badgeCount: state.badgeCount }) };
} [...]
}
[...]
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { iconName, mapStateToProps } = routeToIcon(navigation.state.routeName);
let IconWithBadgeContainer = connect(mapStateToProps, mapDispatchToProps)(IconWithBadge);
return <IconWithBadgeContainer name={iconName} size={25} color={tintColor} />;
},
[...]
export default class App extends React.Component {
render() {
return (
<Provider store={store}>
<AppContainer
ref={navigatorRef => {
globalNavigatorRef = navigatorRef;
}}
/>
</Provider>
);
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句