Question

我正在开发一个我目前无法推进的应用程序，如果有人可以帮助我，我将不胜感激。

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

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

我想我必须使用this.props.navigation.navigate ('RouteName', {/ * params go here * /})和this.props.navigation.getParam (paramName, defaultValue)来发送和接收数据，但是我不知道您是否必须使用componentDidMount或componentWillMount，并且在无论哪种情况，您能否解释一下它是如何工作的？查看文档中的内容，但我不清楚它们的用法，在此先感谢您抽出宝贵时间给我帮助

Answer 1

根据以上评论，您正在使用以下功能导航至扫描仪屏幕。

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')

将参数传递到上一个屏幕并使用反应导航进行更新

1 个答案: