导航到react native时如何从另一个组件调用函数？

Question

我想做什么

从第三到第一导航时，我想在第一中使用功能Refresh。

一流的

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

  Refresh = async () => {
    const querySnapshot = await DB.getAllItems();

    const items = [];
    querySnapshot.forEach(doc => {
      items.push(doc.data());
    });
    this.setState({
      items,
      checkedItems: [],
    });
  }
}

它从第一导航到第二。

第二名

export default class Second extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false,
    };
  }

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  }

  render() {
    return (
      <Modal isVisible={this.state.isModalVisible}>
        <Third nav={this} />
      </Modal>
    )
  }
}

第二个有一个子组件，第三个是模态。

第三名

export default class Third extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  navigateFirst = () => {
    this.props.nav.toggleModal();
    this.props.nav.props.navigation.navigate('First');
  }

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this.navigateFirst}
        >
          <Text>Back To First</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

在“第三”中，它导航回“第一”关闭模式。

问题

我不想使用componentDidUpdate，因为“第一”具有复选框。

如果我使用componentDidUpdate，则每次按下复选框时，都会触发Refresh。

那是我避免的事情。

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

Answer 1

如果每次加载First.js时都调用Refresh函数会更容易。然后，当您从第三返回到第一时，它会自动触发它。

// First.js

componentDidMount() {
  this.Refresh();
  this.props.navigation.addListener('willFocus', this.Refresh)

}

Answer 2

您可以使用componentDidUpdate轻松实现所需的行为，而无需在每个道具和状态更改上调用refresh。

第三

export default class Third extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  navigateFirst = () => {
    this.props.nav.toggleModal();
    // this.props.nav.props.navigation.navigate('First');
   //instead of just .navigate('First') you can pass param  
this.props.nav.props.navigation.navigate('First',{isFromThird:true}) //like this

  }

  render() {
    return (
      <View>
        <TouchableOpacity
          onPress={this.navigateFirst}
        >
          <Text>Back To First</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

在First.js中，只需检查参数isFromThird

componentDidUpdate(prevProps,prevState){
// React Navigation < 5
let isFromThird = this.props.navigation.getParam("isFromThird",false)

//React Navigation >= 5
let isFromThird = this.props.route.params?.isFromThird ?? false;

if(isFromThird){
this.Refresh()
}