没有从 expo 应用程序中的函数调用返回 jsx答案

【问题标题】：not returning jsx from function call in expo app没有从 expo 应用程序中的函数调用返回 jsx
【发布时间】：2020-05-08 22:36:27
【问题描述】：

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Button,Dimensions } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';

export default function ScannerScreen() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);
  const { width : WIDTH } = Dimensions.get('window')
  useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  function handleBarCodeScanned({ type, data }){
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
     return(
         <View
           style = {{
             justifyContent: 'center',
             alignItems: 'center',
             height: 200,
             width: WIDTH-50,
             backgroundColor: 'white'
           }}>

         </View>
     );
  };

  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',
        justifyContent: 'flex-end',
      }}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />

      {scanned && (
        <Button title={'Tap to Scan Again'} onPress={() => 
 setScanned(false)} />
      )}
    </View>
  );
}

在成功扫描条形码时，我想在相机视图上显示自定义视图，但 jsx 没有返回。任何帮助表示赞赏。alert 用于检查它是否工作并且工作正常，但是每当我返回 jsx 时它不会显示任何内容。函数 handleBar CodeScanned 在按下退出按钮时被调用。但 jsx 不会返回。

【问题讨论】：

标签： react-native expo

【解决方案1】：

我想您想在成功扫描条形码后隐藏相机视图。您可以通过如下包装您的条形码和自定义视图来实现。

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import { BarCodeScanner } from "expo-barcode-scanner";

export default function ScannerScreen() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

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

  function handleBarCodeScanned({ type, data }) {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  }

  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",
        justifyContent: "flex-end"
      }}
    >
      {scanned ? (
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "gray"
          }}
        >
          {/* display your custom component */}
          <Button
            title={"Tap to Scan Again"}
            onPress={() => setScanned(false)}
          />
        </View>
      ) : (
        <BarCodeScanner
          onBarCodeScanned={handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
        />
      )}
    </View>
  );
}

希望这对您有所帮助。欢迎提出疑问。

【讨论】：