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之前。

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

1 个答案: