React native 如何显示带有扫描二维码信息的模式？

技术堆栈：世博会，反应本机 使用：世博会条形码扫描仪

我正在尝试创建一个应用程序，它将扫描二维码，然后在屏幕上显示二维码中的信息，最好是以模式显示，这样我就可以显示图像

我已经创建了一个应用程序可以做到这一点。。。只是它使用了一个警报功能来显示文本。如何将其更改为模态？当我尝试将其更改为模态或返回模态时，它不起作用

我的代码：

import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image, Button, Modal } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {createCustomerInformation2} from './src/graphql/mutations'

import logo from './assets/icon.png';
import Scanner from './components/QRScanner';
import custModal from './components/custInfo'


export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  // const [modalVisible, setModalVisible] = useState(false);


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

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    var newData = JSON.parse(data)
    // return(
    //   <View>
    //   <Modal>
    //     <View>
    //       <Text>Test</Text>
    //     </View>
    //   </Modal>
    //   </View>
    // )
    alert(`
      Customer: ${newData.name}
      Email: ${newData.email}
      Phone: ${newData.phone}
      Favorite Drink: ${newData.favoriteDrink}
    `);
    // createCustomerInformation2(newData)();
  };

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



  return (
    <View id="view" style={styles.container}>
    <BarCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={StyleSheet.absoluteFillObject}
      // If you want to use the front facing or rear facing, include type={'front'} or put 'back'
    />
    {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    
  </View>
  );
}


const styles = StyleSheet.create({
container: {
  flex: 1,
  flexDirection: 'column',
  justifyContent: 'center',
},
});

import React，{useCallback，useffect，useState}来自“React”；
从“react native”导入{样式表、文本、视图、图像、按钮、模式}；
从“expo条形码扫描仪”导入{BarCodeScanner}；
从“/src/graphql/translations”导入{createCustomerInformation2}
从“/assets/icon.png”导入徽标；
从“./components/QRScanner”导入扫描仪；
从“./components/custInfo”导入custModal
导出默认函数App（）{
const[hasPermission，setHasPermission]=useState（null）；
const[scanned，setScanned]=使用状态（false）；
//const[modalVisible，setModalVisible]=使用状态（false）；
useffect（（）=>{
（异步（）=>{
const{status}=wait BarCodeScanner.requestPermissionsAsync（）；
setHasPermission（状态==‘已授予’）；
})();
}, []);
常量手柄代码=（{type，data}）=>{
（真实的）；
var newData=JSON.parse（数据）
//返回(
//   
//   
//     
//试验
//     
//   
//   
// )
警觉的(`
客户：${newData.name}
电子邮件：${newData.Email}
电话：${newData.Phone}
最喜欢的饮料：${newData.favoriteDrink}
`);
//createCustomerInformation2（newData）（）；
};
if（hasPermission==null）{
返回请求相机许可；
}
if（hasPermission==false）{
不允许进入摄像机；
}
返回(
{scanned&&setScanned（false）}/>}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
为内容辩护：“中心”，
},
});

您需要将其包含在应用程序返回的JSX中，而不是在onBarCodeScanned处理程序中返回JSX。如果不存在值，则需要有条件地隐藏模态。然后，您将通过将扫描值分配给事件处理程序中的状态变量并在模式中显示该值来填充它。

您需要将其包含在应用程序返回的JSX中，而不是在onBarCodeScanned处理程序中返回该JSX。如果不存在值，则需要有条件地隐藏模态。然后，您将通过将扫描的值分配给事件处理程序中的状态变量并在模式中显示该值来填充它。

您能给我一个我需要做什么的示例吗？扫描的OnBarCode来自世博会的锅炉铭牌代码。我是否应该删除整行内容，并将其添加到扫描之前隐藏的模式中？它将如何填充数据？是的，您真正需要的是

consthandlebarcodescanted=（{type，data}）=>{setBarCode（{type，data}）；setModalVisible（true）；}

，然后您的模式可以是类似于

{modalVisible&&{barCode.type}{barCode.data}

的东西，可以工作。但是，我的模型中需要显示来自handleBarCodeScanned函数的var newData=JSON.parse（数据）。如果我把HooLabBoCordSeNeNeD.DATA数据放在中间，就像你说的那样，我不能显示数据。有什么想法吗？哦，在调用

setBarCode

之前，只需在处理程序中对其进行解析，然后确定：您需要添加另一个状态变量：

const[barCode，setBarCode]=useState（null）。在解析JSONC后，您将在
handleBarCodeScanned
中设置数据。您能给我一个示例说明我需要做什么吗？扫描的OnBarCode来自世博会的锅炉铭牌代码。我是否应该删除整行内容，并将其添加到扫描之前隐藏的模式中？它将如何填充数据？是的，您真正需要的是
consthandlebarcodescanted=（{type，data}）=>{setBarCode（{type，data}）；setModalVisible（true）；}
，然后您的模式可以是类似于
{modalVisible&&{barCode.type}{barCode.data}
的东西，可以工作。但是，我的模型中需要显示来自handleBarCodeScanned函数的var newData=JSON.parse（数据）。如果我把HooLabBoCordSeNeNeD.DATA数据放在中间，就像你说的那样，我不能显示数据。有什么想法吗？哦，在调用
setBarCode
之前，只需在处理程序中对其进行解析，然后确定：您需要添加另一个状态变量：
const[barCode，setBarCode]=useState（null）。在解析JSON后，您将在
handlebarcodes
中设置数据