React Native学习之开源组件react-native-camera

react-native-camera：A Camera component for React Native. Also supports barcode scanning!

支持二维码扫描，类似原生Android Zxing google

安装组件

npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
react-native link react-native-camera

react-native link不是安装，而是添加原生依赖，只有在对应的组件已经安装好的情况下才能react-native link。react-native link之后需重新编译！

通过 link 来理解下React Native的架构：js环境 -> jsBridge -> native环境

业务逻辑是ReactJs处理，UI用react写，但实际桥接成Native

ref属性

ref的两种属性：String属性和回调属性（组件render渲染完成后的回调）

官网：https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

this callback will be executed immediately after the component is mounted（组件render之后DidMount之前）

案例

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    Dimensions,
    Image,
    TouchableHighlight,
    ScrollView,
    StyleSheet,
    Text,
    View
} from 'react-native';

import Camera from 'react-native-camera';

class RNAPP extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Camera
                    ref = {(cam) => {
                        this.camera = cam;
                    }}
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}
                    >
                    <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[点击拍照]</Text>
                </Camera>
            </View>
        );
    }

    takePicture() {
        this.camera.capture()
            .then(
                (data) => console.log(data)
                //Object {path: "file:///storage/emulated/0/DCIM/IMG_20161003_083639.jpg"}
            )
            .catch(
                err => console.error(err)
            );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        color: '#000',
        padding: 10,
        margin: 40
    }
});

AppRegistry.registerComponent('RNAPP', () => RNAPP);