Skip to content

Commit a468aab

Browse files
Dynamsoft-JersonDynamsoft-Jerson
committed
update sample to navigator
1 parent eddf7e0 commit a468aab

File tree

3 files changed

+143
-100
lines changed

3 files changed

+143
-100
lines changed

‎BarcodeReaderSimpleSample/App.js‎

Lines changed: 35 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,41 @@
11
import React from 'react';
2-
import {Text} from 'react-native';
3-
import {
4-
DynamsoftBarcodeReader,
5-
DynamsoftCameraView,
6-
BarcodeResult,
7-
EnumDBRPresetTemplate,
8-
Region,
9-
EnumBarcodeFormat,
10-
DBRRuntimeSettings
11-
} from 'dynamsoft-capture-vision-react-native';
12-
13-
14-
class App extends React.Component {
15-
state = {
16-
results: null
17-
};
18-
19-
componentDidMount() {
20-
(async () => {
21-
// Initialize the license so that you can use full feature of the Barcode Reader module.
22-
try {
23-
await DynamsoftBarcodeReader.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
24-
} catch (e) {
25-
console.log(e);
26-
}
27-
28-
// Create a barcode reader instance.
29-
this.reader = await DynamsoftBarcodeReader.createInstance();
30-
await this.reader.updateRuntimeSettings(EnumDBRPresetTemplate.DEFAULT);
31-
32-
// Get the current runtime settings of the barcode reader.
33-
let settings = await this.reader.getRuntimeSettings();
34-
35-
// Set the expected barcode count to 0 when you are not sure how many barcodes you are scanning.
36-
// Set the expected barcode count to 1 can maximize the barcode decoding speed.
37-
settings.expectedBarcodesCount = 0;
38-
// Set the barcode format to read.
39-
settings.barcodeFormatIds = EnumBarcodeFormat.BF_ONED | EnumBarcodeFormat.BF_QR_CODE | EnumBarcodeFormat.BF_PDF417 | EnumBarcodeFormat.BF_DATAMATRIX;
40-
41-
// Apply the new runtime settings to the barcode reader.
42-
await this.reader.updateRuntimeSettings(settings);
43-
44-
// Add a result listener. The result listener will handle callback when barcode result is returned.
45-
this.reader.addResultListener((results) => {
46-
// Update the newly detected barcode results to the state.
47-
this.setState({results: results})
48-
})
49-
50-
// Enable video barcode scanning.
51-
// If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
52-
// The barcode reader will scan the barcodes continuously before you trigger stopScanning.
53-
this.reader.startScanning();
54-
})();
55-
56-
57-
}
58-
59-
async componentWillUnmount() {
60-
// Stop the barcode decoding thread when your component is unmount.
61-
await this.reader.stopScanning()
62-
// Remove the result listener when your component is unmount.
63-
this.reader.removeAllResultListeners()
2+
import {Button, View} from 'react-native';
3+
import {NavigationContainer} from '@react-navigation/native';
4+
import {createNativeStackNavigator} from '@react-navigation/native-stack';
5+
import BarcodeScanner from './BarcodeScanner';
6+
import {DynamsoftBarcodeReader} from 'dynamsoft-capture-vision-react-native';
7+
8+
function HomeScreen({navigation}) {
9+
async () => {
10+
// Initialize the license so that you can use full feature of the Barcode Reader module.
11+
try {
12+
await DynamsoftBarcodeReader.initLicense('DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9');
13+
} catch (e) {
14+
console.log(e);
6415
}
16+
};
17+
18+
return (
19+
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
20+
<Button
21+
title="Start Scanning"
22+
onPress={() => navigation.navigate('Barcode')}
23+
/>
24+
</View>
25+
);
26+
}
6527

66-
render() {
67-
let barcode_text = "";
68-
// Define the scan region.
69-
let region = {
70-
regionTop: 30,
71-
regionLeft: 15,
72-
regionBottom: 70,
73-
regionRight: 85,
74-
regionMeasuredByPercentage: true
75-
}
76-
let results = this.state.results;
77-
if (results && results.length > 0){
78-
for (var i=0; i<results.length; i++) {
79-
barcode_text += results[i].barcodeFormatString+":"+results[i].barcodeText+"\n"
80-
}
81-
}
82-
83-
return (
84-
<DynamsoftCameraView
85-
style={{
86-
flex: 1,
87-
}}
88-
ref = {(ref)=>{this.scanner = ref}}
89-
overlayVisible={true}
90-
scanRegionVisible={true}
91-
scanRegion={region}
92-
>
93-
<Text style={{
94-
flex: 0.9,
95-
marginTop: 100,
96-
textAlign: "center",
97-
color: "white",
98-
fontSize: 18,
99-
}}>{results && results.length > 0 ? barcode_text : "null"}</Text>
100-
</DynamsoftCameraView>
101-
);
102-
}
28+
const Stack = createNativeStackNavigator();
29+
30+
function App() {
31+
return (
32+
<NavigationContainer>
33+
<Stack.Navigator initialRouteName="Home">
34+
<Stack.Screen name="Home" component={HomeScreen} />
35+
<Stack.Screen name="Barcode" component={BarcodeScanner} />
36+
</Stack.Navigator>
37+
</NavigationContainer>
38+
);
10339
}
10440

10541
export default App;

‎BarcodeReaderSimpleSample/BarcodeScanner.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import {Text, Dimensions} from 'react-native';
3+
import {
4+
DynamsoftBarcodeReader,
5+
DynamsoftCameraView,
6+
EnumBarcodeFormat,
7+
EnumTorchState
8+
} from 'dynamsoft-capture-vision-react-native';
9+
10+
class BarcodeScanner extends React.Component {
11+
state = {
12+
results: null,
13+
};
14+
15+
async componentDidMount() {
16+
// Create a barcode reader instance.
17+
this.reader = await DynamsoftBarcodeReader.createInstance();
18+
19+
// Get the current runtime settings of the barcode reader.
20+
let settings = await this.reader.getRuntimeSettings();
21+
22+
// Set the expected barcode count to 0 when you are not sure how many barcodes you are scanning.
23+
// Set the expected barcode count to 1 can maximize the barcode decoding speed.
24+
settings.expectedBarcodesCount = 0;
25+
26+
// Set the barcode format to read.
27+
settings.barcodeFormatIds = EnumBarcodeFormat.BF_ONED | EnumBarcodeFormat.BF_QR_CODE | EnumBarcodeFormat.BF_PDF417 | EnumBarcodeFormat.BF_DATAMATRIX;
28+
29+
// Apply the new runtime settings to the barcode reader.
30+
await this.reader.updateRuntimeSettings(settings);
31+
32+
// Add a result listener. The result listener will handle callback when barcode result is returned.
33+
this.reader.addResultListener((results) => {
34+
// Update the newly detected barcode results to the state.
35+
this.setState({results: results})
36+
})
37+
38+
// Enable video barcode scanning.
39+
// If the camera is opened, the barcode reader will start the barcode decoding thread when you triggered the startScanning.
40+
// The barcode reader will scan the barcodes continuously before you trigger stopScanning.
41+
this.reader.startScanning();
42+
}
43+
44+
async componentWillUnmount() {
45+
// Stop the barcode decoding thread when your component is unmount.
46+
await this.reader.stopScanning();
47+
// Remove the result listener when your component is unmount.
48+
this.reader.removeAllResultListeners();
49+
}
50+
51+
render() {
52+
let barcode_text = '';
53+
// Define the scan region.
54+
let region = {
55+
regionTop: 30,
56+
regionLeft: 15,
57+
regionBottom: 70,
58+
regionRight: 85,
59+
regionMeasuredByPercentage: true,
60+
};
61+
let results = this.state.results;
62+
if (results && results.length > 0) {
63+
for (var i = 0; i < results.length; i++) {
64+
barcode_text += results[i].barcodeFormatString + ':' + results[i].barcodeText + '\n';
65+
}
66+
}
67+
68+
const deviceWidth = Dimensions.get('window').width;
69+
const deviceHeight = Dimensions.get('window').height;
70+
71+
return (
72+
<DynamsoftCameraView
73+
style={{
74+
width: deviceWidth,
75+
height: deviceHeight,
76+
}}
77+
ref={ref => {
78+
this.scanner = ref;
79+
}}
80+
overlayVisible={true}
81+
scanRegionVisible={true}
82+
scanRegion={region}
83+
torchButton={{
84+
visible: true
85+
}}
86+
torchState={ EnumTorchState.ON }
87+
>
88+
<Text
89+
style={{
90+
flex: 0.9,
91+
marginTop: 200,
92+
textAlign: 'center',
93+
color: 'white',
94+
fontSize: 18,
95+
}}>
96+
{results && results.length > 0 ? barcode_text : ''}
97+
</Text>
98+
</DynamsoftCameraView>
99+
);
100+
}
101+
}
102+
103+
export default BarcodeScanner;

‎BarcodeReaderSimpleSample/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,13 @@
1010
"lint": "eslint ."
1111
},
1212
"dependencies": {
13+
"@react-navigation/native": "^6.0.10",
14+
"@react-navigation/native-stack": "^6.6.2",
15+
"dynamsoft-capture-vision-react-native": "^1.0.0",
1316
"react": "17.0.2",
1417
"react-native": "0.65.0",
15-
"dynamsoft-capture-vision-react-native": "^1.0.0"
18+
"react-native-safe-area-context": "^4.2.5",
19+
"react-native-screens": "^3.13.1"
1620
},
1721
"devDependencies": {
1822
"@babel/core": "^7.12.9",

0 commit comments

Comments
 (0)