我选择了react-native-camera,地址:https://www.npmjs.com/package/react-native-camera
我这里用尽量简单的配置和使用方式来感受react-native-camera
一
在package.json 里的dependencies内加:
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera",
二
npm install
react-native link react-native-camera
android配置:
三
android/settings.gradle:
以下代码有则不需要改动,无则添加,我在link后是已经自动生成了的。
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
四
android/app/build.gradle:
这里原来自动生成的是这样的
compile project(':react-native-camera')
按照文档说的改成了:
compile (project(':react-native-camera')) {
exclude group: "com.google.android.gms"
compile 'com.android.support:exifinterface:25.+'
compile ('com.google.android.gms:play-services-vision:12.0.1') {
force = true
}
}
五
android/build.gradle:
在allprojects中repositories里添加如下语句,注意顺序
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
我的完成结构:
allprojects {
repositories {
mavenLocal()
jcenter()
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
六
MainApplication.java:
检查无则添加,我在link后已存在
import org.reactnative.camera.RNCameraPackage;
new RNCameraPackage() //asList内添加
有些人会不太知道位置,这里是我的完成效果:
package com.tms_driver;
import android.app.Application;
import com.facebook.react.ReactApplication;
import org.reactnative.camera.RNCameraPackage; //这里~~~~
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNCameraPackage() //这里~~~~
);
}
@Override
protected String getJSMainModuleName() {
return "index";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
链接给的文档中还有一些配置,这里我不需要,需要的可以去阅读文档。
接下去就是使用了
引入:
import Camera from 'react-native-camera'; //可扫二维码与条形码
使用:
constructor(props) {
super(props)
this.state = {
open: false,
code: '',
}
}
componentDidMount(){
}
componentWillReceiveProps(nextProps) {
if (nextProps !== this.props) {
}
}
onBarCodeRead(e) {
if (e.data !== this.code) {
this.setState({open: false, code: e.data })
//当条形码变化时保存当前条形码,并关闭扫码
}
}
render() {
return (
<View style={styles.container}>
{
this.state.open ?
<Camera
ref={(cam) => { this.camera = cam }}
onBarCodeRead={e => this.onBarCodeRead(e)}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
>
</Camera>
:
<View>
<TouchableOpacity onPress={() => this.setState({open: true})}>
<Text>扫一扫</Text>
</TouchableOpacity>
<Text>结果:{this.state.code}</Text>
</View>
}
</View>
)
}
扫条形码得到的是一串数字编号,
我的实际使用里是利用这个数字编号去数据库查询产品信息,并做一些记录和操作。
扫二维码一般是一个链接。
<Camera>在这里你可以写上你想要的样式,例如扫描线的动画效果</Camera>