I want to re-render two tabs by setParams
, it works if i dispatch to one tab, but dispatch to two tabs like code bellow doesn't work
const setParamsAction1 = NavigationActions.setParams({ params: { foo: 'bar' } }, key: 'a' });
const setParamsAction2 = NavigationActions.setParams({ params: { foo: 'bar' } }, key: 'b' });
this.props.navigation.dispatch(setParamsAction1);
this.props.navigation.dispatch(setParamsAction2);
You need to hook the onNavigationStateChange
event to dispatch your second setParams
action.
//a navigator for demo
const AppNav = TabNavigator({
main: {screen: MainScreen},
a: {screen: aScreen},
b: {screen: bScreen}
});
//get the root reference
let appNavRef;
class App extends Component {
render() {
return (
<AppNav ref={navigatorRef => {
appNavRef = navigatorRef
}}
onNavigationStateChange={
(prevState, currentState) => {
//print the state to get more detail
// console.log(prevState);
// console.log(currentState);
//compare the two state: before and after dispatch setParams for "a"
//change the if condition for your need
let preParams = prevState.routes[1].params;
let currentParams = currentState.routes[1].params;
if (preParams === undefined && currentParams.foo === 'bar') {
//dispatch setParams for "b"
const setParamsAction = NavigationActions.setParams({
params: currentParams,
key: 'b',
});
appNavRef.dispatch(setParamsAction)
}
}
}/>
);
}
}
export default App;