每次使用React Navigation显示标签栏屏幕时，重新加载AsyncStorage数据

Question

我在我正在构建的React Native应用程序中使用React Navigation，并且我有一组TabNavigator中的屏幕。其中一个屏幕可能会改变AsyncStorage中需要反映在另一个屏幕中的内容。

我尝试了各种不同的东西，包括在第二个屏幕的tabBarOnPress中设置navigationOptions属性，但这不起作用。我也尝试过使用componentDidUpdate()和componentWillUpdate()，但没有。

可以接受的方法是什么？

更新1我设法得到它，当我按下选项卡时我正在捕捉

static navigationOptions = {
    headerTitle: 'Screen B',
    tabBarLabel: 'Screen B',
    tabBarOnPress: (obj) => {
      // load data here....

      // this causes this screen to actually appear
      obj.jumpToIndex(obj.scene.index)
     }
};

现在，我需要在使用中加载数据

loadFavouritesData() {
    // load from AsyncStorage here and update state
}

但是，在this.loadFavouritesData()的箭头函数中使用tabBarOnPress不会这样做，因为它不是正确的this。在此之后我该怎么办？

Answer 1

我想我找到了解决方案。这是一个相当hacky但它​​的工作原理。

从问题中发布的更新继续，我在componentWillMount()中进一步做到这一点：

componentWillMount() {
    this.props.navigation.setParams({
       currentScreen: this,
    })
}

这使得navigation对象随身携带对当前屏幕的引用。然后我可以将navigationOptions修改为箭头函数，它采用navigation对象：

static navigationOptions = ({ navigation }) => ({
    headerTitle: 'Screen B',
    tabBarLabel: 'Screen B',
    tabBarOnPress: (obj) => {

       // load data here by getting currentScreen from the navigation params

       navigation.state.params.currentScreen.loadFavouritesData()
       obj.jumpToIndex(obj.scene.index)
    }
})

这不是最干净的解决方案，但它似乎现在起作用，至少在我开始进入Redux之前。