UNPKG

shopcham-rn-genbarcode

Version:

gen base64 barcode (CODE128,QRcode,EAN13) thank and this project modified react-native-smart-code package

200 lines (147 loc) 5.19 kB
# react-native-smart-code ## Getting started `$ npm install react-native-smart-code --save` or `$ yarn add react-native-smart-code` ## Linking (for React Native <= 0.59 only, React Native >= 0.60 skip this as auto-linking should work) ### Mostly automatic installation `$ react-native link react-native-smart-code` ### Mostly automatic install with CocoaPods 1. `npm install react-native-smart-code --save` or `$ yarn add react-native-smart-code` 2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it: ```obj-c pod 'react-native-smart-code', path: '../node_modules/react-native-smart-code/ios/RNCodeGenerator.podspec' ``` 3. Run `pod install` _Note:_ You might need to adjust your Podfile following the example below: ```diff target 'yourTargetName' do # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # Include this for RN >= 0.47 'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43 'RCTText', 'RCTNetwork', 'RCTWebSocket', # Needed for debugging 'RCTAnimation', # Needed for FlatList and animations running on native UI thread # Add any other subspecs you want to use in your project ] # Explicitly include Yoga if you are using RN >= 0.42.0 pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' # Third party deps podspec link + pod 'react-native-smart-code', path: '../node_modules/react-native-smart-code/ios/RNCodeGenerator.podspec' end post_install do |installer| installer.pods_project.targets.each do |target| if target.name == "React" target.remove_from_project end end end ``` ### Manual installation #### iOS 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]` 2. Go to `node_modules` ➜ `react-native-smart-code` and add `RNCodeGenerator.xcodeproj` 3. In XCode, in the project navigator, select your project. Add `RNCodeGenerator.framework` to your project's `Build Phases` ➜ `Link Binary With Libraries` 4. Run your project (`Cmd+R`)< #### Android 1. Open up `android/app/src/main/java/[...]/MainActivity.java` - Add `import com.react_native_code_generator.RNCodeGeneratorPackage;` to the imports at the top of the file - Add `new RNCodeGeneratorPackage()` to the list returned by the `getPackages()` method ```diff + import com.react_native_code_generator.RNCodeGeneratorPackage; public class MainApplication extends Application implements ReactApplication { //...... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( + new RNCodeGeneratorPackage(), new MainReactPackage() ); } ...... } ``` 2. Append the following lines to `android/settings.gradle`: ```diff ... include ':app' + include ':react-native-smart-code' + project(':react-native-smart-code').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-code/android') ``` 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`: ```diff dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules + compile project(':react-native-smart-code') } ``` 4. (optional) You can override this settings by adding a Project-wide gradle configuration properties for use by all modules in your ReactNative project by adding the below to android/build.gradle file, ```gradle buildscript {...} allprojects {...} /** * Project-wide gradle configuration properties for use by all modules */ ext { compileSdkVersion = 26 targetSdkVersion = 26 buildToolsVersion = "26.0.2" googlePlayServicesVersion = "12.0.1" googlePlayServicesVisionVersion = "15.0.2" supportLibVersion = "27.1.0" } ``` ## Usage ### React Native ```javascript import CodeGenerator from 'react-native-smart-code'; const ImageWidth = 300; const ImageHeight = 100; const data = await CodeGenerator.generate({ type: CodeGenerator.Type.Code128, code: 'codeValue' }); <Image source={{ uri: data }} resizeMode="cover" style={{ height: ImageHeight, width: ImageWidth, borderColor: 'black', borderWidth: 1 }} />; ``` ### React Note: `generate`API width max value is 4,height max value is 150 ```javascript import CodeGenerator from 'react-native-smart-code'; const IMAGE_WIDTH = 300; const IMAGE_HEIGHT = 100; const data = await CodeGenerator.generate({ type: CodeGenerator.Type.Code128, code: 'codeValue' }); <img src={data} width={IMAGE_WIDTH} height={IMAGE_HEIGHT} />; ``` #### HTML Note: `generate`API width max value is 4,height max value is 150 ```HTML <script src="../../lib/CodeGenerator.web.js"></script> <script> const promise = CodeGenerator.default.generate({ type: CodeGenerator.Type.Code128, code: 'codeValue' }) promise.then(function (value) { console.log(value, (typeof value)); }, function (error) { console.log(error.message) }); </script> ```