问响应本机如何从另一个函数更新UI
EN

Stack Overflow用户

提问于 2021-01-25 05:34:52

回答 2查看 544关注 0票数 1

我是新的反应，并试图创建一个基本的条形码扫描仪使用这个例子：https://docs.expo.io/versions/latest/sdk/bar-code-scanner/

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

export default function App() {
    return ( 
    <View>      
     <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>{"bar code reading goes here"}</Text>
    </ScrollView>   
    {BarCoderScanner()}
    </View> 
         
    );
    
}

function bscanner(){

  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

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

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    return(
     <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>${data}</Text>
    </ScrollView>
    );
  };

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

  return (

    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>

  );
}

我想知道如何从回调函数handleBarCodeScanned更新主UI，也就是App()。

javascript

react-native

稳定高可用网关

NAT 网关提供 IP 地址转换服务，为腾讯云内资源提供安全性更高的 Internet 访问服务。

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-25 09:05:12

const [data, setData] = useState("");

After

创建一个新的状态变量:您称为setScanned(true);调用setScanned(true);的返回代码--从handleBarCodeScanned

Change到{scanned ? (<ScrollView style={styles.scrollView}><Text style={styles.text}>{data}</Text></ScrollView>) : (<Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />)}

票数 2

Stack Overflow用户

发布于 2021-01-25 09:16:15

试试这个：

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

export default function App() {
    const [data, setData] = useState('');
   
    return ( 
    <View>      
     <ScrollView style={styles.scrollView}>
        <Text style={styles.text}>{data}</Text>
    </ScrollView>   
    <BScanner onRead={item => setData(item)} />
    </View> 
         
    );
    
}

function BScanner({onRead}){

  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

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

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    onRead(data);
  };

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

  return (

    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
    </View>

  );
}