React Native 中的二维码扫描器和 Webview

Question

React Native 相对较新。一直在尝试让 QR 码扫描仪扫描 QR 码并将应用程序屏幕定向到 Web 视图以查看从 QR 码解密的 URL。许多 QR 码包提供了显示 URL 的示例，但它们不一定提到将 URL 传递给 webview。

方法

在这里，我将 url 设置为空字符串，并将变量 webview 设置为 false。在扫描时，我在扫描并将变量 webview 设置为 true 后更新 url 的状态。

然后使用条件渲染尝试在扫描二维码时在二维码扫描和网页视图之间切换。我提供了一个按钮来切换回 QR 摄像头。

问题

App扫描二维码时崩溃。 xcode 在调试模式下没有明显的错误。我查看了模拟器的调试部分，没有明显的错误，在扫描之前，不太确定自从应用程序崩溃以来扫描时如何在 iPhone 上进行调试。

关于测试应用程序

代码片段

import React, { Component } from 'react'
import { View, TouchableOpacity, Text} from 'react-native'
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

export default class QR extends Component {
  constructor(props) {
    super(props)
    this.state = {
      webview: false,
      url: ''
    }
  }
  
  onSuccess = e => {
      this.setState({url: e.data, webview: true})
    }
    
  render() {
    return (
      <View style={{flex:1}}>
        <View style={{flex:1}}>
            {this.state.webview && (<Webview 
              source={{uri: this.state.url}}
              style={{flex:1}}
              scalesPageToFit={true} />
              )}

            {!this.state.webview && (<QRCodeScanner
              onRead={this.onSuccess}
              flashMode={RNCamera.Constants.FlashMode.torch}
          /> 
          )}
    
          <TouchableOpacity
            style={{
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: 'rgba(0,0,0,0.2)',
              borderRadius: 50,
              width: 50,
              height: 50,
              position: 'absolute',
              right: 5,
              bottom: 5
            }}
            onPress={() => this.setState({ webview: false })}
          >
              <Text> Click Me </Text>
          </TouchableOpacity>
      </View>
    </View>
    );
  }
}

如果知道我哪里出错了，我将不胜感激。我已经尝试了许多其他 QR 码扫描仪，我确实认为我的方法应该有效，但并没有真正看到错误。

谢谢！

Answer 1

正确。由于您已正确识别问题，因此这是一个具有约束力的问题。下面的代码将解决这个问题。

this.onSuccess.bind(this)

还有一种方法可以实现这一点。当您导入 'react-native-qrcode-scanner' 和 'react-native-camera' 包时，您的应用程序将变得庞大。所以使用任何基于 HTML 的 QR 码 reader 并从 WebView 打开它。

return (
  <View style={styles.flex1}>
    <WebView
      source={{uri: '#scannerlink'}}
      startInLoadingState={true}
      onShouldStartLoadWithRequest={event => {
        if (event.url !== '#scannerlink') {
          console.log('onShouldStartLoadWithRequest', event.url);
          // Write your code here.
          return false;
        }
        return true;
      }}
    />
  </View>
);

在HTML扫描页面，扫描成功后打开URL。使用函数 onShouldStartLoadWithRequest()

处理 react-native 代码上的此 URL 更改

有多个HTML个二维码reader可用。 jsqrcode 很适合使用它。如果需要，这里有一个 article 以显示完整的集成。

React Native 中的二维码扫描器和 Webview

QR Code Scanner and Webview in React Native

mobile

qr-code

webview

react-native

方法

问题

代码片段