响应本机如何从另一个函数更新UI
响应本机如何从另一个函数更新UI
提问于 2021-01-25 13:34:52
我是新的反应，并试图创建一个基本的条形码扫描仪使用这个例子：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()。
回答 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
Stack Overflow用户
发布于 2021-01-25 17: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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65885821
复制相关文章
相似问题
腾讯云开发者
