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

Question

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

我尝试了各种不同的方法，包括在第二个屏幕的navigationOptions 中设置tabBarOnPress 属性，但这不起作用。我也尝试使用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)
     }
};

现在，我需要在 using 中加载数据

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

但是，在 tabBarOnPress 的箭头函数中使用 this.loadFavouritesData() 并没有这样做，因为它不是正确的 this。之后我能做什么？

Answer 1

我想我找到了解决方案。这是一个相当老套的方法，但它确实有效。

从问题中发布的更新继续，我在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 之前。