代码拉取完成,页面将自动刷新
$ npm install react-native-barcode-zxing --save
$ react-native link react-native-barcode-zxing
RNBarcode.sln
in node_modules/react-native-barcode/windows/RNBarcode.sln
folder to their solution, reference from their app.MainPage.cs
appusing Barcode.RNBarcode;
to the usings at the top of the filenew RNBarcodePackage()
to the List<IReactPackage>
returned by the Packages
methodimport React, { Component } from 'react';
import { StyleSheet, View, Picker, Button, Image } from 'react-native';
import RNBarcode from 'react-native-barcode-zxing';
export default class EncodeApp extends Component {
constructor(props) {
super(props);
this.onEncodePress = this.onEncodePress.bind(this);
this.state = {
imagesrc: ""
}
}
onEncodePress() {
const self = this;
const options = {
'type' : 'pdf417', // types
'code' : '12345',
'width' : 200,
'height' : 200
}
RNBarcode.encode(options, (error, blob) => {
if (error) {
console.error(error);
} else {
let baseImg = `data:image/png;base64,${blob}`;
self.setState({
imagesrc: baseImg
})
}
})
}
render() {
return (
<View style={styles.container}>
<Button
title="Encode"
onPress={this.onEncodePress}
color="#841584"></Button>
<Image style={styles.barcode} ref='barcode' source={{ uri: this.state.imagesrc }}></Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
barcode: {
width: 200,
height: 200,
backgroundColor: '#FF0000',
}
});
import { BarcodeView } from 'react-native-barcode-zxing';
export default class BarcodeComponent extends Component {
render() {
return (
<View>
<BarcodeView text="This is a Data Matrix by TEC-IT"
format="DATA_MATRIX"
style={{ height: 200, width: 200 }} />
</View>
)
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。