React native Webview Uri通过使用React Native、Expo扫描条形码重定向_React Native

React native Webview Uri通过使用React Native、Expo扫描条形码重定向

react-native

React native Webview Uri通过使用React Native、Expo扫描条形码重定向,react-native,React Native,我正在使用React Native和Expo创建条形码扫描仪我正在尝试在扫描条形码后将新URL传递到Web视图但我不知道怎么做请帮忙导出默认函数App（）{ const[hasPermission，setHasPermission]=useState（null）； const[scanned，setScanned]=使用状态（false）； const[modalVisible，setModalVisible]=使用状态（false）； useffect（（）=>{ （异步（）=>{

我正在使用React Native和Expo创建条形码扫描仪

我正在尝试在扫描条形码后将新URL传递到Web视图

但我不知道怎么做

请帮忙

导出默认函数App（）{
const[hasPermission，setHasPermission]=useState（null）；
const[scanned，setScanned]=使用状态（false）；
const[modalVisible，setModalVisible]=使用状态（false）；
useffect（（）=>{
（异步（）=>{
const{status}=wait BarCodeScanner.requestPermissionsAsync（）；
setHasPermission（状态==‘已授予’）；
})();
}, []);
常量手柄代码=（{type，data}）=>{
（真实的）；
setModalVisible（真）；
};
if（hasPermission==null）{
返回请求相机许可；
}
if（hasPermission==false）{
不允许进入摄像机；
}
返回(
{
(假);；
}}>
{
setModalVisible（！modalVisible）；
(假);；
}}
底层颜色为灰色
>
重新扫描
二维码阅读器v0.5
二维扫描。。。
);
}

我正在使用React Native和Expo创建条形码扫描仪

我正在尝试在扫描条形码后将新URL传递到Web视图

但我不知道怎么做

请帮忙。

这就可以了。我将扫描器中的url保存在state.uri中，并使用它代替静态字符串。出于测试目的，我使用了此条形码，从而得出以下答案：

最好的，保罗

  import React, { useState, useEffect } from 'react';
  import { Text, View, StyleSheet, Button, Modal, TouchableHighlight, Image } from 'react-native';
  import { WebView } from 'react-native-webview';
  import { BarCodeScanner } from 'expo-barcode-scanner';

  export default function App(){
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(true);
    const [modalVisible, setModalVisible] = useState(true);
    const [uri, setUri] = useState('https://stackoverflow.com/questions/61977154/webview-uri-redirect-by-scanning-barcodes-with-react-native-expo');


useEffect(() => {
  (async () => {
    const { status } = await BarCodeScanner.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setModalVisible(true);
    // console.warn("Scan returned " + data);
    setUri({ uri: data })
};

if (hasPermission === null) {
  return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
  return <Text>No access to camera</Text>;
}

return (
  <View
    style={{
      flex: 1,
      flexDirection: 'column'
    }}>
    <Modal
      animationType="slide"
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        setScanned(false);
      }}>
      <View style={{ flex: 1 }}>
        <WebView
          style={{ flex: 1 }}
          source={{uri: uri['uri']}}
        />

        <TouchableHighlight
          style={{
            backgroundColor:'black',
            padding: 15,
            alignItems: 'center'
          }}
          onPress={() => {
            setModalVisible(!modalVisible);
            setScanned(false);
          }}
          underlayColor='slategray'
        >
          <Text style={{ color:'white', fontSize: 15 }}>Re Scan</Text>
        </TouchableHighlight>
      </View>
    </Modal>

    <BarCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View style={{ marginBottom: 100 }}>
        <View style={{ alignItems: 'center', marginBottom: 5 }}>
          <Image
            style={{
              width: 100,
              height: 100,
              resizeMode: 'contain',
              marginBottom: 20,
            }}
            source={{ uri: 'http://domain.biz/img/logo_dark.png' }}
          />
          <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold', paddingBottom: 10}}>
            QR Code Reader v0.5
          </Text>
        </View>
        <View
          style={{
            borderColor: 'white',
            borderTopWidth: 5,
            borderBottomWidth: 5,
            borderLeftWidth: 1,
            borderRightWidth: 1,
            paddingVertical: 80,
            paddingHorizontal: 100,
          }}
        />

        <View style={{ alignItems: 'center', marginTop: 5 }}>
          <Text style={{ color: 'white', fontSize: 15}}>
            QR Scan...
          </Text>
        </View>
      </View>
    </BarCodeScanner>
  </View>
);

import React，{useState，useffect}来自“React”；
从“react native”导入{文本、视图、样式表、按钮、模式、TouchableHighlight、图像}；
从“react native WebView”导入{WebView}；
从“expo条形码扫描仪”导入{BarCodeScanner}；
导出默认函数App（）{
const[hasPermission，setHasPermission]=useState（null）；
const[scanned，setScanned]=使用状态（true）；
const[modalVisible，setModalVisible]=useState（true）；
const[uri，setUri]=useState（'https://stackoverflow.com/questions/61977154/webview-uri-redirect-by-scanning-barcodes-with-react-native-expo');
useffect（（）=>{
（异步（）=>{
const{status}=wait BarCodeScanner.requestPermissionsAsync（）；
setHasPermission（状态==‘已授予’）；
})();
}, []);
常量手柄代码=（{type，data}）=>{
（真实的）；
setModalVisible（真）；
//控制台警告（“扫描返回”+数据）；
setUri（{uri:data}）
};
if（hasPermission==null）{
返回请求相机许可；
}
if（hasPermission==false）{
不允许进入摄像机；
}
返回(
{
(假);；
}}>
{
setModalVisible（！modalVisible）；
(假);；
}}
底层颜色为灰色
>
重新扫描
二维码阅读器v0.5
二维扫描。。。
);

}

您是否可以使用package.json中的导入和相关部分添加整个源代码？这样我就可以编译一个解决方案并进行测试。否则，我只能发送一些未经测试的代码，您必须自己调试；）没有关系。我发现您使用了expo示例，并设法自己设置了代码。

  import React, { useState, useEffect } from 'react';
  import { Text, View, StyleSheet, Button, Modal, TouchableHighlight, Image } from 'react-native';
  import { WebView } from 'react-native-webview';
  import { BarCodeScanner } from 'expo-barcode-scanner';

  export default function App(){
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(true);
    const [modalVisible, setModalVisible] = useState(true);
    const [uri, setUri] = useState('https://stackoverflow.com/questions/61977154/webview-uri-redirect-by-scanning-barcodes-with-react-native-expo');


useEffect(() => {
  (async () => {
    const { status } = await BarCodeScanner.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setModalVisible(true);
    // console.warn("Scan returned " + data);
    setUri({ uri: data })
};

if (hasPermission === null) {
  return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
  return <Text>No access to camera</Text>;
}

return (
  <View
    style={{
      flex: 1,
      flexDirection: 'column'
    }}>
    <Modal
      animationType="slide"
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        setScanned(false);
      }}>
      <View style={{ flex: 1 }}>
        <WebView
          style={{ flex: 1 }}
          source={{uri: uri['uri']}}
        />

        <TouchableHighlight
          style={{
            backgroundColor:'black',
            padding: 15,
            alignItems: 'center'
          }}
          onPress={() => {
            setModalVisible(!modalVisible);
            setScanned(false);
          }}
          underlayColor='slategray'
        >
          <Text style={{ color:'white', fontSize: 15 }}>Re Scan</Text>
        </TouchableHighlight>
      </View>
    </Modal>

    <BarCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View style={{ marginBottom: 100 }}>
        <View style={{ alignItems: 'center', marginBottom: 5 }}>
          <Image
            style={{
              width: 100,
              height: 100,
              resizeMode: 'contain',
              marginBottom: 20,
            }}
            source={{ uri: 'http://domain.biz/img/logo_dark.png' }}
          />
          <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold', paddingBottom: 10}}>
            QR Code Reader v0.5
          </Text>
        </View>
        <View
          style={{
            borderColor: 'white',
            borderTopWidth: 5,
            borderBottomWidth: 5,
            borderLeftWidth: 1,
            borderRightWidth: 1,
            paddingVertical: 80,
            paddingHorizontal: 100,
          }}
        />

        <View style={{ alignItems: 'center', marginTop: 5 }}>
          <Text style={{ color: 'white', fontSize: 15}}>
            QR Scan...
          </Text>
        </View>
      </View>
    </BarCodeScanner>
  </View>
);