Question

我在我的应用中使用React Navigation。返回时，如何刷新上一个面板上的数据？

一个实际的例子是：我目前在面板A ，我导航到面板B ，我在其中更新数据库中的数据，该数据显示在面板A 中。更改数据库中的数据后， goBack（）到面板A 之后，我希望面板A 现已重新呈现并保存来自数据库中。

我已经读过我可以将自定义刷新函数作为params传递给子类并在导航回来之前调用它，但是我认为这不是一种实现我想要的简洁方法，因为我更新了一个尚未成功的组件安装，我可以抛出一个错误。

Answer 1

这就是我的成就！

在小组A中

refreshFunction()
{
    //your refresh code should be here
}

 <TouchableOpacity onPress={()=>{
   this.props.navigation.navigate('PanelB', {refreshFunction: this.refreshFunction});
 }}>
    Redirect to Panel B
 </TouchableOpacity>

在小组B中

const refreshFunction = this.props.navigation.state.params.refreshFunction;
if(typeof refreshFunction === 'function')
{
  refreshFunction();                
  //your back function
  this.goBack();
}

Answer 2

React Navigation provides listeners，可用于此确切场景。

例如，将一个侦听器附加到面板A ，当焦点对准时（即当面板A 被“弹出”到）时，该监听器将重新获取更新的数据：

componentDidMount() {
  const { fetchDatabaseData, navigation } = this.props
  fetchDatabaseData()
  this.willFocusListener = navigation.addListener(
    'willFocus',
    () => {
      fetchDatabaseData()
    }
  )
}

componentWillUnmount() {
  this.willFocusListener.remove()
}

Answer 3

经过如此多的搜索，得出结论：是的，您可以：

render(){
...
   <NavigationEvents
      onWillFocus={() => {
      //Call whatever logic or dispatch redux actions and update the screen!
      }}
   />
...
}

来源：https://github.com/react-navigation/react-navigation/issues/1171

Answer 4

使用redux + firebase，我遇到的问题是，在列出该数据的组件返回查看{{1}之前，来自firebase.on('value', snapshot => { dispatch(data) }的可观察数据mappedToProps会在保存时更新redux存储。 }，因此列表中不会触发任何重新渲染。我通过将过去与当前道具进行比较并仅在道具不匹配时才在fn上重新触发firebase。解决了它。这比导航列表组件时始终触发要好，但是我更喜欢一种解决方案，该解决方案可强制触发重新渲染而根本不调用firebase fn。

onBack()

Answer 5

根据导航 docs 导航事件

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

Answer 6

如果你有这样的场景，你可以使用 redux ，它可以帮助你管理标签/屏幕和组件中的数据，因为减少了连接到商店，在redux商店整个应用程序状态得到管理。

React Native - 在goBack（）上的React Navigation rerender面板

6 个答案: