>我有一个反应原生应用程序，我在其中使用反应原生相机，我可以扫描一次，扫描结果显示没有任何问题。但是当我进行第二次扫描时，它会显示相同的结果。我将条形码扫描仪放在一个选项卡中，扫描后导航到带有结果的不同选项卡。如何多次扫描和显示结果？ 这是我拥有的条形码扫描仪选项卡组件：
class BarScannerView extends Component {
constructor(props) {
super(props);
this.camera = null;
this.barcodeCodes = [];
this.state = {
changeScreen: false,
camera: {
type: RNCamera.Constants.Type.back,
flashMode: RNCamera.Constants.FlashMode.auto,
barcodeFinderVisible: true
},
focusedScreen: false
};
}
onBarCodeRead = (scanResult) => {
if (scanResult.data !== null) {
let bacodeScanResult = scanResult.data
AsyncStorage.setItem('barcodeValue', bacodeScanResult)
this.props.navigation.navigate('Stock')
}
return;
}
componentDidMount() {
console.log(' BarScanner componentDidMount was called...', this.props)
const { navigation } = this.props;
navigation.addListener('willFocus', () =>
this.setState({ focusedScreen: true })
);
navigation.addListener('willBlur', () =>
this.setState({ focusedScreen: false })
);
}
componentWillUnmount() {
console.log('BarScanner componentWillUnmount was called..')
this.onBarCodeRead()
}
render() {
const { focusedScreen } = this.state;
if (focusedScreen) {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
barcodeFinderVisible={this.state.camera.barcodeFinderVisible}
barcodeFinderWidth={280}
barcodeFinderHeight={220}
barcodeFinderBorderColor="white"
barcodeFinderBorderWidth={2}
defaultTouchToFocus
flashMode={this.state.camera.flashMode}
onBarCodeRead={this.onBarCodeRead}
onFocusChanged={() => { }}
onZoomChanged={() => { }}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
style={styles.preview}
type={this.state.camera.type}
/>
<View style={[styles.overlay, styles.topOverlay]}>
<Text style={styles.scanScreenMessage}>Please scan the barcode.</Text>
</View>
<View style={{ position: 'absolute', top: 150, left: '12%' }}>
<View
style={{
width: 300,
height: 300,
backgroundColor: 'transparent',
borderColor: 'white',
borderWidth: 1
}}
>
</View>
</View>
<View style={[styles.overlay, styles.bottomOverlay]}>
<Button
disabled
onPress={() => { console.log('scan clicked'); }}
style={styles.enterBarcodeManualButton}
title="Choose Barcode"
/>
</View>
</View>
);
} else {
return <Stock/>
}
}
}
export default BarScannerView当用户第二次转到此条形码扫描仪选项卡时，如何删除之前的结果？
附加信息：
- 反应原生版本："0.57.8">
- 反应导航 v3
- 反应原生相机 "^1.6.4">
您需要使用this.props.navigation.push而不是this.props.navigation.navigate才能navigate到同一屏幕并显示新内容。
导航推送反应导航只需毫不犹豫地将新屏幕推送到堆栈。
导航导航React 导航将在堆栈中搜索屏幕，如果屏幕存在，它将导航到它，否则它会将其添加到堆栈中并导航。