From 408b7cadb5c1576077997088521cd6a226114462 Mon Sep 17 00:00:00 2001 From: shenweikang Date: Tue, 7 Aug 2018 11:27:54 +0800 Subject: [PATCH 1/3] Low version --- Barcode.js | 10 ++++------ .../barcode/RCTCapturePackage.java | 1 - package.json | 3 +++ 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Barcode.js b/Barcode.js index 0fdb6ac..70fc108 100644 --- a/Barcode.js +++ b/Barcode.js @@ -5,18 +5,16 @@ * Copyright (c) 2016 react-native-component */ - -import React, { - PropTypes, - Component, -} from 'react' +import React, { Component } from 'react' import { View, requireNativeComponent, NativeModules, AppState, Platform, + ViewPropTypes } from 'react-native' +import PropTypes from 'prop-types' const BarcodeManager = Platform.OS == 'ios' ? NativeModules.Barcode : NativeModules.CaptureModule @@ -34,7 +32,7 @@ export default class Barcode extends Component { } static propTypes = { - ...View.propTypes, + ...ViewPropTypes, onBarCodeRead: PropTypes.func.isRequired, barCodeTypes: PropTypes.array, scannerRectWidth: PropTypes.number, diff --git a/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.java b/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.java index f0a397d..fcedfae 100644 --- a/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.java +++ b/android/src/main/java/com/reactnativecomponent/barcode/RCTCapturePackage.java @@ -38,7 +38,6 @@ public List createNativeModules(ReactApplicationContext reactAppli ); } - @Override public List> createJSModules() { return Collections.emptyList(); } diff --git a/package.json b/package.json index 23fd36e..dfb5c38 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,9 @@ "barcode", "scan" ], + "dependencies": { + "prop-types": "^15.6.1" + }, "author": "HISAME SHIZUMARU", "license": "MIT", "bugs": { From ef161543193b57f9bf5ab20411f19d46335fea99 Mon Sep 17 00:00:00 2001 From: AaronShen <30681612+AaronBank@users.noreply.github.com> Date: Tue, 4 Sep 2018 10:38:48 +0800 Subject: [PATCH 2/3] Update README.md --- README.md | 231 +----------------------------------------------------- 1 file changed, 1 insertion(+), 230 deletions(-) diff --git a/README.md b/README.md index 31e0265..0e36520 100644 --- a/README.md +++ b/README.md @@ -1,230 +1 @@ -# react-native-smart-barcode - -[![npm](https://img.shields.io/npm/v/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) -[![npm](https://img.shields.io/npm/dm/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) -[![npm](https://img.shields.io/npm/dt/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) -[![npm](https://img.shields.io/npm/l/react-native-smart-barcode.svg)](https://github.com/react-native-component/react-native-smart-barcode/blob/master/LICENSE) - -A smart barcode scanner component for React Native app. -The library uses [https://github.com/zxing/zxing][1] to decode the barcodes for android, and also supports ios. - -## Preview - -![react-native-smart-barcode-preview-ios][2] - -## Installation - -``` -npm install react-native-smart-barcode --save -``` - -## Notice - -It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use `npm install react-native-smart-barcode@untilRN0.40 --save` - - -## Installation (iOS) - -* Drag RCTBarCode.xcodeproj to your project on Xcode. - -* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTBarCode.a from the Products folder inside the RCTBarCode.xcodeproj. - -* Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive. - -* Dray raw folder to your project - -* Add `Privacy - Camera Usage Description` property in your info.plist(for ios 10) - -## Installation (Android) - -* In `android/settings.gradle` - -``` -... -include ':react-native-smart-barcode' -project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android') -``` - -* In `android/app/build.gradle` - -``` -... -dependencies { - ... - // From node_modules - compile project(':react-native-smart-barcode') -} -``` - -* In MainApplication.java - -``` -... -private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { - // private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { - @Override - protected boolean getUseDeveloperSupport() { - return BuildConfig.DEBUG; - } - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage() - ); - } - }; - - public void setReactNativeHost(ReactNativeHost reactNativeHost) { - mReactNativeHost = reactNativeHost; - } - - @Override - public ReactNativeHost getReactNativeHost() { - return mReactNativeHost; - } -... -``` - -* In MainActivity.java -``` -... -import com.reactnativecomponent.barcode.RCTCapturePackage; //import RCTCapturePackage -... -@Override -protected void onCreate(Bundle savedInstanceState) { - MainApplication application = (MainApplication) this.getApplication(); - application.setReactNativeHost(new ReactNativeHost(application) { - @Override - protected boolean getUseDeveloperSupport() { - return BuildConfig.DEBUG; - } - - @Override - protected List getPackages() { - return Arrays.asList( - new MainReactPackage(), - new RCTCapturePackage(MainActivity.this) //register Module - ); - } - - }); - - super.onCreate(savedInstanceState); -} -``` - -* In AndroidManifest.xml, add camera permissions -``` -... - - - - - -... -``` - - -## Full Demo - -see [ReactNativeComponentDemos][0] - -## Usage - -Install the package from npm with `npm install react-native-smart-barcode --save`. -Then, require it from your app's JavaScript files with `import Barcode from 'react-native-smart-barcode'`. - -```js - - -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 ( - - {this.state.viewAppear ? this._barCode = component } - onBarCodeRead={this._onBarCodeRead}/> : null} - - ) - } - - 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) -``` - -## Props - -Prop | Type | Optional | Default | Description ----------------------- | ------ | -------- | --------- | ----------- -barCodeTypes | array | Yes | | determines the supported barcodeTypes -scannerRectWidth | number | Yes | 255 | determines the width of scannerRect -scannerRectHeight | number | Yes | 255 | determines the height of scannerRect -scannerRectTop | number | Yes | 0 | determines the top shift of scannerRect -scannerRectLeft | number | Yes | 0 | determines the left shift of scannerRect -scannerLineInterval | number | Yes | 3000 | determines the interval of scannerLine's movement -scannerRectCornerColor | string | Yes | `#09BB0D` | determines the color of scannerRectCorner - -[0]: https://github.com/cyqresig/ReactNativeComponentDemos -[1]: https://github.com/zxing/zxing -[2]: http://cyqresig.github.io/img/react-native-smart-barcode-preview-ios-v1.0.0.gif -[3]: http://cyqresig.github.io/img/react-native-smart-barcode-preview-android-v1.0.0.gif \ No newline at end of file +修改react-native-smart-barcode组件对高版本react不支持问题 From 6db4351b292e1820aba304c3f315338cd61b3f71 Mon Sep 17 00:00:00 2001 From: shenweikang Date: Wed, 17 Oct 2018 10:05:12 +0800 Subject: [PATCH 3/3] prop-types --- Barcode.js | 1 - README.md | 231 ++++++++++++++++++++++++++++++++++++++++++++++++++- package.json | 2 +- 3 files changed, 231 insertions(+), 3 deletions(-) diff --git a/Barcode.js b/Barcode.js index 70fc108..3064013 100644 --- a/Barcode.js +++ b/Barcode.js @@ -7,7 +7,6 @@ import React, { Component } from 'react' import { - View, requireNativeComponent, NativeModules, AppState, diff --git a/README.md b/README.md index 0e36520..31e0265 100644 --- a/README.md +++ b/README.md @@ -1 +1,230 @@ -修改react-native-smart-barcode组件对高版本react不支持问题 +# react-native-smart-barcode + +[![npm](https://img.shields.io/npm/v/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) +[![npm](https://img.shields.io/npm/dm/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) +[![npm](https://img.shields.io/npm/dt/react-native-smart-barcode.svg)](https://www.npmjs.com/package/react-native-smart-barcode) +[![npm](https://img.shields.io/npm/l/react-native-smart-barcode.svg)](https://github.com/react-native-component/react-native-smart-barcode/blob/master/LICENSE) + +A smart barcode scanner component for React Native app. +The library uses [https://github.com/zxing/zxing][1] to decode the barcodes for android, and also supports ios. + +## Preview + +![react-native-smart-barcode-preview-ios][2] + +## Installation + +``` +npm install react-native-smart-barcode --save +``` + +## Notice + +It can only be used greater-than-equal react-native 0.4.0 for ios, if you want to use the package less-than react-native 0.4.0, use `npm install react-native-smart-barcode@untilRN0.40 --save` + + +## Installation (iOS) + +* Drag RCTBarCode.xcodeproj to your project on Xcode. + +* Click on your main project file (the one that represents the .xcodeproj) select Build Phases and drag libRCTBarCode.a from the Products folder inside the RCTBarCode.xcodeproj. + +* Look for Header Search Paths and make sure it contains $(SRCROOT)/../../../react-native/React as recursive. + +* Dray raw folder to your project + +* Add `Privacy - Camera Usage Description` property in your info.plist(for ios 10) + +## Installation (Android) + +* In `android/settings.gradle` + +``` +... +include ':react-native-smart-barcode' +project(':react-native-smart-barcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-barcode/android') +``` + +* In `android/app/build.gradle` + +``` +... +dependencies { + ... + // From node_modules + compile project(':react-native-smart-barcode') +} +``` + +* In MainApplication.java + +``` +... +private ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + // private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } + + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage() + ); + } + }; + + public void setReactNativeHost(ReactNativeHost reactNativeHost) { + mReactNativeHost = reactNativeHost; + } + + @Override + public ReactNativeHost getReactNativeHost() { + return mReactNativeHost; + } +... +``` + +* In MainActivity.java +``` +... +import com.reactnativecomponent.barcode.RCTCapturePackage; //import RCTCapturePackage +... +@Override +protected void onCreate(Bundle savedInstanceState) { + MainApplication application = (MainApplication) this.getApplication(); + application.setReactNativeHost(new ReactNativeHost(application) { + @Override + protected boolean getUseDeveloperSupport() { + return BuildConfig.DEBUG; + } + + @Override + protected List getPackages() { + return Arrays.asList( + new MainReactPackage(), + new RCTCapturePackage(MainActivity.this) //register Module + ); + } + + }); + + super.onCreate(savedInstanceState); +} +``` + +* In AndroidManifest.xml, add camera permissions +``` +... + + + + + +... +``` + + +## Full Demo + +see [ReactNativeComponentDemos][0] + +## Usage + +Install the package from npm with `npm install react-native-smart-barcode --save`. +Then, require it from your app's JavaScript files with `import Barcode from 'react-native-smart-barcode'`. + +```js + + +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 ( + + {this.state.viewAppear ? this._barCode = component } + onBarCodeRead={this._onBarCodeRead}/> : null} + + ) + } + + 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) +``` + +## Props + +Prop | Type | Optional | Default | Description +---------------------- | ------ | -------- | --------- | ----------- +barCodeTypes | array | Yes | | determines the supported barcodeTypes +scannerRectWidth | number | Yes | 255 | determines the width of scannerRect +scannerRectHeight | number | Yes | 255 | determines the height of scannerRect +scannerRectTop | number | Yes | 0 | determines the top shift of scannerRect +scannerRectLeft | number | Yes | 0 | determines the left shift of scannerRect +scannerLineInterval | number | Yes | 3000 | determines the interval of scannerLine's movement +scannerRectCornerColor | string | Yes | `#09BB0D` | determines the color of scannerRectCorner + +[0]: https://github.com/cyqresig/ReactNativeComponentDemos +[1]: https://github.com/zxing/zxing +[2]: http://cyqresig.github.io/img/react-native-smart-barcode-preview-ios-v1.0.0.gif +[3]: http://cyqresig.github.io/img/react-native-smart-barcode-preview-android-v1.0.0.gif \ No newline at end of file diff --git a/package.json b/package.json index dfb5c38..cadc368 100644 --- a/package.json +++ b/package.json @@ -28,4 +28,4 @@ "peerDependencies": { "react-native": ">=0.40.0" } -} +} \ No newline at end of file