一、安装
npm install react-native-camera --save
react-native link react-native-camera
二、配置(IOS)
三、使用
只需import { RNCamera } from react-native-camera 模块中 取出标签。
引用标签:
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
onBarCodeRead={this.onBarCodeRead}
>
</RNCamera>
四、属性
1. autoFocus
值:(RNCamera.Constants.AutoFocus.on默认)或RNCamera.Constants.AutoFocus.off
使用该autoFocus属性指定相机的自动对焦设置。
RNCamera.Constants.AutoFocus.on将其打开,RNCamera.Constants.AutoFocus.off将其关闭。
2.flashMode
指定相机的闪光模式
值:(RNCamera.Constants.FlashMode.off默认)RNCamera.Constants.FlashMode.on;
3.onBarCodeRead
检测到条形码时,将调用指定的方法;
事件包含data(条形码中的数据)和type(检测到的条形码类型)
五、绘制扫码界面
代码:
import {RNCamera} from ‘react-native-camera’
render() {
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
onBarCodeRead={this.onBarCodeRead}
>
<View style={styles.rectangleContainer}>
<View style={styles.rectangle}/>
<Animated.View style={[
styles.border,
{transform: [{translateY: this.state.moveAnim}]}]}/>
<Text style={styles.rectangleText}>将二维码放入框内,即可自动扫描</Text>
</View>
</RNCamera>
</View>
);
}
在 Camera 组件中绘制一个绿色的正方形 View,随后就是绘制绿色方框中滚动的线。使用 RN 中的 Animated 组件来实现动画效果。 首先在 componentDidMount 函数中初始化动画函数。
componentDidMount() {
this.startAnimation();
}
startAnimation = () => {
this.state.moveAnim.setValue(0);
Animated.timing(
this.state.moveAnim,
{
toValue: -200,
duration: 1500,
easing: Easing.linear
}
).start(() => this.startAnimation());
};
并且记得在构造函数中初始化 state:
constructor(props) {
super(props);
this.state = {
moveAnim: new Animated.Value(0)
};
}
通过 onBarCodeRead 函数来处理扫描结果:
// 识别二维码
onBarCodeRead = (result) => {
const { navigate } = this.props.navigation;
const {data} = result; //只要拿到data就可以了
//路由跳转到webView页面;
navigate('Sale', {
url: data
})
};
完整版示例:
class ScanScreen extends Component {
constructor(props) {
super(props);
this.state = {
moveAnim: new Animated.Value(0)
};
}
componentDidMount() {
this.startAnimation();
}
startAnimation = () => {
this.state.moveAnim.setValue(0);
Animated.timing(
this.state.moveAnim,
{
toValue: -200,
duration: 1500,
easing: Easing.linear
}
).start(() => this.startAnimation());
};
// 识别二维码