将参数传递到上一个屏幕并使用react-navigation进行更新

Posted 2023-02-08

我正在开发一个我目前无法推进的应用程序，如果有人可以帮助我，我会非常感激，因为我仍然是新的反应原生，

应用程序必须生成一个报告，为此，您必须捕获产品的序列号，这些数据可以从TextInput捕获或使用相机扫描条形码或QR码，重点在于触摸它时的图像，它会将您发送到相机的屏幕。

我的问题是，如何让扫描仪读取的信息转到上一个屏幕，并且数据会自动放入TextInput？

我想我必须使用this.props.navigation.navigate ('RouteName', / * params go here * /)和this.props.navigation.getParam (paramName, defaultValue)发送和接收数据，但我不知道你是否必须使用componentDidMount或componentWillMount，在任何一种情况下，你能解释它是如何工作的吗？查看文档，但我不清楚它们是如何使用的，提前感谢您抽出宝贵时间给我一些帮助

答案

从上面的注释中，您将使用以下功能导航到扫描仪屏幕。

QRScanner ()  
  const navigateAction = NavigationActions.navigate ( 
    routeName: 'QRScanner' 
  ); 
  this.props.navigation.dispatch (navigateAction); 

您应该能够将参数传递到params键的下一个屏幕。

QRScanner = () =>  
  const navigateAction = NavigationActions.navigate ( 
    routeName: 'QRScanner',
    params:  sendSerialNumber: this.sendSerialNumber, // pass the parameter here
    ); 
  this.props.navigation.dispatch (navigateAction); 

这是sendSerialNumber与QRScanner函数在同一屏幕中的函数，并使用您要发送的序列号的值更新状态。

sendSerialNumber = (serialNumber) => 
  this.setState(serialNumber)

所以你的第一个屏幕看起来像这样：

export default class Screen1 extends React.Component 

  constructor(props) 
    super(props);

    this.state = 
      serialNumber: 'unknown'
    
  

  QRScanner = () =>  
    const navigateAction = NavigationActions.navigate ( 
      routeName: 'QRScanner',
      params:  sendSerialNumber: this.sendSerialNumber, 
      ); 
    this.props.navigation.dispatch (navigateAction); 
  

  sendSerialNumber = (serialNumber) => 
    this.setState(serialNumber)
  

  render() 
    return (
      <View style=styles.container>
        <Text>Inital Screen</Text>
        <Button title='Go to QRScreen' onPress=this.QRScanner />
        <Text>serial number: this.state.serialNumber</Text>
      </View>
    )
  

然后你可以在几个地方捕获发送的参数。虽然最好在回去之前使用它，但是将您找到的序列号传递给函数。您可以像这样访问您传递的功能

this.props.navigation.state.params.sendSerialNumber('serial number to send back')