reactjs - 如何在 React-Native 中将参数传回 BackHandler 上的父屏幕？

Question

"react": "16.13.1",
"react-native": "0.63.2",
"@react-navigation/bottom-tabs": "^5.7.3",
"@react-navigation/compat": "^5.2.5",
"@react-navigation/material-bottom-tabs": "^5.2.15",
"@react-navigation/material-top-tabs": "^5.2.15",
"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",

我想在设备上按回键时将数据传回父屏幕。但是我得到了错误:-

TypeError: undefined is not an object (evaluating 'this.props.navigation')

处理返回箭头标题不是问题。但是在智能手机后退按钮本身有这个错误。

主项目.js

    onPressShowItem = (item, index) => {
        this.props.navigation.navigate('ItemDetails', { FlatData: this.state.FlatData, FlatIndex: index, returnFromItems: this.returnFromItems });
    }
    returnFromItems = data => {
        console.log('returned');
        this.setState({ data });
    }

ItemDetails.js

class ItemDetails extends PureComponent {
  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }
  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }
  /// PART OF ERROR APPEAR
  handleBackButton() {
    this.props.route.params.returnFromItems({ FlatData: this.state.FlatData });
    return true;
  }
  // Handle back on header. No problem here
  navigateBack = () => {
    this.props.navigation.goBack();
    this.props.route.params.returnFromItems({ FlatData: this.state.FlatData });
  };
  render() {
    return (
    const RenderBackAction = () => (
      <TopNavigationAction icon={BackIcon} onPress={this.navigateBack} />
        <TopNavigation title='Item Details' alignment='center' accessoryLeft={RenderBackAction} />
    );
    );
  }
}

我已经尝试过但最终出现错误:-

1. this.props.route.params.returnFromItems
2. this.props.navigation.state.params.returnFromItems

Answer 1

您缺少对“this”的引用

你可以绑定(bind)它或者像下面这样改变函数

handleBackButton=()=> {
    this.props.route.params.returnFromItems({ FlatData: this.state.FlatData });
    return true;
}

当您返回 true 时，您必须自己管理返回，因此首选第二种方法。

您也可以在那里使用现有的 navigateBack

handleBackButton=()=> {
    this.navigateBack();
    return true;
}