Question

React导航文档非常清楚如何将prop传递给功能组件，但是基于类的组件又如何呢？

这是一个扫描QR码并将数据传递到class-based component

的屏幕

export const ScreenQRCodeScanner = ({ navigation }) => {
...
  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
    var clientID = {
      ClientID: data,
    };
    navigation.navigate("QRCodeResult", clientID);
  };
...
};

QRCodeResult是此功能：

export class QRCodeResult extends Component {

  constructor() {
    super();
    this.state = {
      loading: false,
      clientInfo: {},
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    // API call with a dynamic body based on data passed from the previous screen (clientID)
  }

  render() {
    return (
      <SafeAreaView>
        <Text>Test QR Code Result Page {this.state.clientInfo.FullName}</Text>
        <Text>{this.state.loading}</Text>
      </SafeAreaView>
    );
  }
}

我正在使用react navigation v5，并且我想使用通过componentDidMount()函数传递的数据来进行API调用

Answer 1

您可以如下访问导航道具

this.props.navigation.navigate("QRCodeResult", {clientID});

如果接收组件也是类组件，则可以像下面这样检索它。

this.props.route.params.clientID

React Navigation将道具传递给类组件

1 个答案: