Question

在 React Native 中，如何在导航到上一页时刷新数据？

2020-05-18

5798

react-native

我想做什么

当从第二页导航回第一页时，我想刷新数据。

问题是，当我从第二页导航回第一页时，第一页中的 onRefresh() 不起作用。

第一页

export default class First extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
      items: [],
    };
  }

  fetchData = async () => {
    const querySnapshot = db.items();
    const items = [];
    querySnapshot.forEach((doc) => {
      items.push(doc.data());
    });
    this.setState({ items });
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    this.onRefresh;
  }

  onRefresh() {
    this.setState({ refreshing: true });
    this.fetchData().then(() => {
      this.setState({ refreshing: false });
    });
  }

  render() {
    return (
      <Container>
        <Content
          refreshControl={(
            <RefreshControl
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh.bind(this)}
            />
        )}
        >
        </Content>
      </Container>
    );
  }
}

第二页

this.props.navigation.navigate('First', 'update');

如果您能给我任何建议，我将不胜感激。

Answer 1

假设您有两个页面 PAGE-A 和 PAGE-B

创建一个名为 ForegroundBackground.js 的 JS 文件

import React from "react";
import { View } from "react-native";

const ForegroundBackground = ({ navigation, bgCallback, fgCallback }) => {
    React.useEffect(() => navigation.addListener('focus', () => {
        fgCallback && fgCallback()
    }), []);
    React.useEffect(() => navigation.addListener('blur', () => {
        bgCallback && bgCallback()
    }), []);
    return (<View/>);
};

export default ForegroundBackground;

您可以在 PAGE-A 的渲染函数中使用它，方法是从屏幕 props 向其提供 navigation 对象。

<ForegroundBackground navigation = {this.props.navigation}
                      fgCallback = {()=>{alert("resume")}}/>

Answer 2

有两种解决方案。

使用商店。在商店中定义一个状态，并在页面 A 和页面 B 中使用该状态。因此，如果您从页面 B 更改商店状态，它将自动反映在整个应用程序中。
您可以在导航时将函数从页面 A 传递到页面 B。该函数的目的是在返回时刷新页面 A 的状态。例如：

this.props.navigation.navigate("pageB", {
  resetData: () => {
    this.setState({
      mydata: ""
    })
  }
})

从页面 B 导航时，您可以执行以下操作：

this.props.navigation.state.params.resetData();
this.props.navigation.goBack();

希望对您有所帮助。如果您需要更多帮助/代码/讨论等，请发表评论