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

【问题标题】：QR Code Scanner and Webview in React NativeReact Native 中的二维码扫描器和 Webview
【发布时间】：2020-10-29 17:12:11
【问题描述】：

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

方法

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

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

问题

应用程序在扫描二维码时崩溃。在 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 码扫描仪，我认为我的方法应该有效，但并没有真正看到错误。

谢谢！

【问题讨论】：

我认为您应该检查本机代码或网页视图的链接，大多数情况下网页视图链接会导致问题，还要检查 ssl
设法解决了这个问题。认为 this.onSuccess 没有绑定，this.onSuccess.bind(this) 成功了。

标签： react-native mobile webview qr-code

【解决方案1】：

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

this.onSuccess.bind(this)

还有另一种方法可以实现这一目标。当您导入“react-native-qrcode-scanner”和“react-native-camera”包时，您的应用程序将变得庞大。因此，请使用任何基于 HTML 的 QR 码阅读器并从 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 二维码阅读器可供使用。 jsqrcode 很好用。如果需要，上面有一个 article 以显示完整的集成。

【讨论】：