npm install react-native-smart-barcode --save
react-native link
或者
react-native link react-native-smart-barcode
因为做的是iphone的,所以在安卓那边没有进行配置。
两者的区别大概在于 他们没有进行
“react-native link react-native-smart-barcode” 这一步操作。
如果是iphone的话,可以略过中间那些步骤。
type Props = {};
export default class App extends Component<Props>
在我这里报错,就顺便删掉,就解除问题了。
import React, { Component } from 'react';
import {
StyleSheet,
View,
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,
};
}
componentDidMount() {
//启动定时器
this.timer = setTimeout(
() => this.setState({viewAppear: true}),
250
);
}
//组件销毁生命周期
componentWillUnmount() {
//清楚定时器
this.timer && clearTimeout(this.timer);
}
_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.code, [
{text: '确认', onPress: () => this._startScan()},
])
};
_startScan = (e) => {
this._barCode.startScan()
};
_stopScan = (e) => {
this._barCode.stopScan()
}
render() {
return (
<View style={{flex: 1}}>
{this.state.viewAppear ?
<Barcode style={{flex: 1,}} ref={component => this._barCode = component}
onBarCodeRead={this._onBarCodeRead}/>
: null
}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
还会出现的问题也就是 关于 func的。
只要把 Barcode 中,把“PropTypes” 单独写出来就可以了。
import PropTypes from 'prop-types'