react-native-component / react-native-smart-barcode Goto Github PK
View Code? Open in Web Editor NEWA smart barcode scanner component for React Native app.
License: MIT License
A smart barcode scanner component for React Native app.
License: MIT License
Android is ok!
目前在Barcode的节点下面,无法添加一些比如 Text或者TouchableOpacity的子节点,导致只能全屏显示,能否放开对应的子view添加功能
Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead
View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.
error:Method will not overwrite
进入扫码界面 不会调用 是否打开相机的权限 在魅族pro6 小米6上都是这样
跳转了一个界面后 摄像头继续对着二维码 会疯狂的扫码。。。
我用smartbarcode跳转二维码扫描界面时很慢,大概2秒的样子,界面是一点一点从屏幕上方滑入的,整个过程并不流畅,给人一种顿卡的感觉
同事用了这个库,还得去node_modules里面改文件才能正常跑起来,这也太扯了
最新的RN怎么解决this.props.navigator是undefined的问题呢?
使用TimerEnhance时也会报错
@cyqresig
我第一次启动扫码功能,苹果弹出授权框,点击取消后,程序闪退
hello,we received an error in android : java.lang.RuntimeException: startPreview failed in android
and it's incidental。
details information as follow:
java.lang.RuntimeException: startPreview failed
at android.hardware.Camera.startPreview(Native Method)
at com.reactnativecomponent.barcode.camera.CameraManager.startPreview(CameraManager.java:177)
at com.reactnativecomponent.barcode.decoding.CaptureActivityHandler.(CaptureActivityHandler.java:63)
at com.reactnativecomponent.barcode.CaptureView.initCamera(CaptureView.java:424)
at com.reactnativecomponent.barcode.CaptureView.startScan(CaptureView.java:364)
at com.reactnativecomponent.barcode.CaptureView.onSurfaceTextureAvailable(CaptureView.java:830)
at android.view.TextureView.getHardwareLayer(TextureView.java:390)
at android.view.TextureView.draw(TextureView.java:339)
at android.view.View.updateDisplayListIfDirty(View.java:19297)
at android.view.View.draw(View.java:20075)
at android.view.ViewGroup.drawChild(ViewGroup.java:4421)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4207)
at android.view.View.updateDisplayListIfDirty(View.java:19288)
at android.view.View.draw(View.java:20075)
at android.view.ViewGroup.drawChild(ViewGroup.java:4421)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4207)
at android.view.View.draw(View.java:20355)
at android.view.View.updateDisplayListIfDirty(View.java:19297)
at android.view.View.draw(View.java:20075)
at android.view.ViewGroup.drawChild(ViewGroup.java:4421)
at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4207)
at android.view.View.updateDisplayListIfDirty(View.java:19288)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4405)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4385)
at android.view.View.updateDisplayListIfDirty(View.java:19256)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4405)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4385)
at android.view.View.updateDisplayListIfDirty(View.java:19256)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4405)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4385)
at android.view.View.updateDisplayListIfDirty(View.java:19256)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:4405)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:4385)
at android.view.View.updateDisplayListIfDirty(View.java:19256)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:686)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:692)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:800)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3488)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3275)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2810)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1779)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7810)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:911)
at android.view.Choreographer.doCallbacks(Choreographer.java:723)
at android.view.Choreographer.doFrame(Choreographer.java:658)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
at android.os.Handler.handleCallback(Handler.java:789)
at android.os.Handler.dispatchMessage(Handler.java:98)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6938)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)
Expected behaviour:
Camera should only scan when QR is within the frame
Observed behaviour:
Camera scanned QR when QR is out of the frame as well.
*Only in iOS
scannerRectTop
and scannerRectLeft
does not work in ios, they simply has no effect at all.
react-native-smart-barcode: 1.0.6
ios: 13.2
2个页面有扫码功能 启动一个页面打开扫码 扫码成功后 navigation 到下一个页面再次调用扫码功能 使用组件 时闪退 或者屏幕显示不正确 不能正确扫码
Execution failed for task ':react-native-smart-barcode:verifyReleaseResources'.
java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2Exception: Android resource linking failed
error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
调试模式下面可以正常扫描,不在调试模式下不能扫描,而且会导致整个页面崩溃
在使用RCTCaptureModule.java中DecodeFromPath方法,传入本地图片路径,抛出异常error length=44893; index=44893。请问是什么原因,谢谢了!!!!
Hello
I wanted to know what exactly do the following variables do?
public int scanTime = 1000;
private long changeTime = 1000;
private int focusTime = 300;
private long sleepTime = 2000;
I realized focusTime
sets the time for each focus of the camera, but I did not notice the rest.
If you can explain completely and accurately, thank you very much.
Hello I would like to point down some bugs (caused mainly by commented code, it seems) on the Android implementation that i have already solved
No1
MainActivity.java
Original code:
@Override
protected void onCreate(Bundle savedInstanceState) {
MainApplication application = (MainApplication) this.getApplication();
application.setReactNativeHost(new ReactNativeHost(application) {
// this access should be public, it throws an error with any other accesor
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTCapturePackage(MainActivity.this)
);
//The RCTCapturePackage overloaded constructor with context argument was commented
// So i followed that definition and used the empty constructor because it relates to another
// empty constructor in source code
}
});
super.onCreate(savedInstanceState);
}
Fixed:
@Override
protected void onCreate(Bundle savedInstanceState) {
MainApplication application = (MainApplication) this.getApplication();
application.setReactNativeHost(new ReactNativeHost(application) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RCTCapturePackage()
);
}
});
super.onCreate(savedInstanceState);
}
No 2:
source code
react-native-smart-barcode/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.js
// Exception on Override, not overriding any method
// just commented it
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
Can not increase the text change side corner box color hope later join thanks
On RN 0.60.4, When I cd ios directory and use "pod install"。The following prompt appears:
[!] use_native_modules! skipped the react-native dependency 'react-native-smart-barcode'. No podspec file was found.
- Check to see if there is an updated version that contains the necessary podspec file
- Contact the library maintainers or send them a PR to add a podspec. The react-native-webview podspec is a good example of a package.json driven
podspec. See https://github.com/react-native-community/react-native-webview/blob/master/react-native-webview.podspec
- If necessary, you can disable autolinking for the dependency and link it manually. See
https://github.com/react-native-community/cli/blob/master/docs/autolinking.md#how-can-i-disable-autolinking-for-unsupported-library
And the following Error on screen when I run the demo
undefined is not an object (evaluating 'BarcodeManager.barCodeTypes')
Thanks!!!
How can we deal with this issues ?
> Task :react-native-smart-barcode:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
请问怎么实现前置摄像头
npm install react-native-smart-barcode --save
react-native link
#43
/node_modules/react-native-smart-barcode/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.java
// @Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
#41
/node_modules/react-native-smart-barcode/Barcode.js
npm install prop-types --save
import React, {Component,} from 'react';
import PropTypes from 'prop-types';
App.js
import React, {
Component
} from 'react';
import {
View,
StyleSheet,
Alert,
} from 'react-native';
import Barcode from 'react-native-smart-barcode';
export default class App extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {
viewAppear: false,
};
}
render() {
return (
<View style={{ flex: 1, backgroundColor: 'black', }}>
<Barcode style={{ flex: 1, }}
ref={component => this._barCode = component}
barCodeTypes={['org.iso.QRCode']} // add this prop
onBarCodeRead={this._onBarCodeRead} />
)
}
componentDidMount() {
let viewAppearCallBack = (event) => {
this.setTimeout(() => {
this.setState({
viewAppear: true,
})
}, 255)
}
this._listeners = [
// this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
]
}
componentWillUnmount() {
this._listeners && this._listeners.forEach(listener => listener.remove());
}
_onBarCodeRead = (e) => {
console.log('e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}')
this._stopScan()
Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
{ text: 'OK', onPress: () => this._startScan() },
])
}
_startScan = (e) => {
this._barCode.startScan()
}
_stopScan = (e) => {
this._barCode.stopScan()
}
}
const styles = StyleSheet.create({
centerText: {
flex: 1,
fontSize: 18,
padding: 32,
color: '#777',
},
textBold: {
fontWeight: '500',
color: '#000',
},
buttonText: {
fontSize: 21,
color: 'rgb(0,122,255)',
},
buttonTouchable: {
padding: 16,
},
});
work now
Allow multiple barcodes to be read at once on Android (as with iOS).
/node_modules/react-native-smart-barcode/Barcode.js
修改import React, { PropTypes, Component } from 'react'
为'import PropTypes from 'prop-types';
同时安装npm install prop-types --save
MainActivity.java:35: error: can't find symbol
application.setReactNativeHost(new ReactNativeHost(application) {
^
symbol: setReactNativeHost()
position: MainApplication application
退出扫描页后。InteractionManager.runAfterInteractions 方法就失效了。
"react-native": "0.43.4"
模拟器上面没问题 就是真机测试的时候发现调用摄像头之后导航栏 变成透明 求指导
import React, {
Component,
} from 'react'
import {
View,
StyleSheet,
Alert,
} from 'react-native'
import Barcode from 'react-native-smart-barcode'
import TimerEnhance from 'react-native-smart-timer-enhance'
class BarcodeTest extends Component {
constructor(props) {
super(props);
this.state = {
viewAppear: false,
};
}
render() {
return (
<View style={{flex: 1, backgroundColor: 'black',}}>
{this.state.viewAppear ? <Barcode style={{flex: 1, }}
ref={ component => this._barCode = component }
onBarCodeRead={this._onBarCodeRead}/> : null}
</View>
)
}
componentDidMount() {
let viewAppearCallBack = (event) => {
this.setTimeout( () => {
this.setState({
viewAppear: true,
})
}, 255)
}
this._listeners = [
//this.props.navigator.navigationContext.addListener('didfocus', viewAppearCallBack)
]
}
componentWillUnmount () {
// this._listeners && this._listeners.forEach(listener => listener.remove());
}
_onBarCodeRead = (e) => {
console.log(`e.nativeEvent.data.type = ${e.nativeEvent.data.type}, e.nativeEvent.data.code = ${e.nativeEvent.data.code}`)
this._stopScan()
Alert.alert(e.nativeEvent.data.type, e.nativeEvent.data.code, [
{text: 'OK', onPress: () => this._startScan()},
])
}
_startScan = (e) => {
this._barCode.startScan()
}
_stopScan = (e) => {
this._barCode.stopScan()
}
}
export default TimerEnhance(BarcodeTest)
My code above. On the app just show a black screen.
PS: I'm not using navigation, but rn router flux
onBarCodeRead = (e) =>{
if(e.nativeEvent.data.type === 'org.ios.QRCode'){
this._barcode.stopScan();
this.props.navigator.pop();
}
}
由于this._barcode.stopScan();没有及时停止,导致this.props.navigator.pop();执行了2次,页面跳转出错,
有什么办法可以及时停止扫描吗?
java.lang.NullPointerException: Attempt to write to field 'boolean com.reactnativecomponent.barcode.view.ViewfinderView.drawLine' on a null object reference
Hello;
Very nice library. It's really detecting very well!!
My question is i want to snap the image of detected barcode and show on the next screen. How could this be possible?
Thanks.
react 版本升级后 PropTypes已单独
大大,提示这个错误是怎么回事?谢谢了,求解答!万分感谢
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.