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

Question

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

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

可接受的方法是什么？

UPDATE 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
}

然而，在 tabBarOnPress 中的箭头函数中使用 this.loadFavouritesData() 并不能做到这一点，因为它不正确 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 之前是这样。

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

Reload AsyncStorage data every time tabbar screen is displayed using React Navigation

javascript

tabnavigator

react-native

asyncstorage

react-navigation