首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >响应本机如何从另一个函数更新UI

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

Stack Overflow用户
提问于 2021-01-25 13:34:52
回答 2查看 544关注 0票数 1

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

代码语言:javascript
代码运行次数:0
运行
复制
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()。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-01-25 17: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)} />)}

  • You
票数 2
EN

Stack Overflow用户

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

试试这个:

代码语言:javascript
代码运行次数:0
运行
复制
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>

  );
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65885821

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档