php点击切换图片的底部导航,点击底部导航栏切换页面时，怎样更新对应组件使其重新获取值？...

问题描述

react-native做的APP，使用React Navigation做路由和导航。如下图

底部是一个由createBottomTabNavigator生成的导航栏，点击Tab A 后，显示A组件的内容。

A组件里面也有一个createMaterialTopTabNavigator创建的顶部Tab 导航栏，默认显示 C组件。

C组件里面是一个列表。

需求是这样的：当我点击Tab A 时，希望C组件里的列表可以更新(重新调用后端接口获取值)。

我想过的方法是：监听A组件，当它被触发时，传一个值给C组件，C组件接收到值调用setState保存起来，因为调用了setState方法，C组件就会被触发更新，重新渲染一次。

但是这里也有个问题：组件A怎样传值给组件C？ 因为它们不是单纯的父子组件关系，中间还隔着一个导航栏组件！

相关代码

export default class A extends Component {

render() {

return (

<View style={{flex: 1}}>

<TabsCAndD/>

</View>

);

}

}

export default class TabsCAndD extends Component {

render() {

return (

<CreaterTab />

);

}

}

const CreateTab = createMaterialTopTabNavigator({

C: {

screen: C,

navigationOptions: () => ({

tabBarLabel: 'C',

})

},

D: {

screen: D,

navigationOptions: () => ({

tabBarLabel: 'D',

})

},

}, {}

});

const CreaterTab = createAppContainer(CreateTab);

export default class C extends Component {

render() {}

}