{"id":512,"date":"2023-02-25T14:27:00","date_gmt":"2023-02-25T06:27:00","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=512"},"modified":"2023-04-29T20:46:09","modified_gmt":"2023-04-29T12:46:09","slug":"react-native-learning-open-source-component-react-native-camera","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-open-source-component-react-native-camera\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u5f00\u6e90\u7ec4\u4ef6react-native-camera"},"content":{"rendered":"

react-native-camera<\/code>\uff1aA Camera component for React Native. Also supports barcode scanning!<\/p>\n

\u652f\u6301\u4e8c\u7ef4\u7801\u626b\u63cf\uff0c\u7c7b\u4f3c\u539f\u751fAndroid Zxing google<\/p>\n

<\/p>\n

\u5b89\u88c5\u7ec4\u4ef6<\/h3>\n
npm install react-native-camera@https:\/\/github.com\/lwansbrough\/react-native-camera.git --save\nreact-native link react-native-camera<\/code><\/pre>\n
\n
react-native link<\/code>\u4e0d\u662f\u5b89\u88c5\uff0c\u800c\u662f\u6dfb\u52a0\u539f\u751f\u4f9d\u8d56\uff0c\u53ea\u6709\u5728\u5bf9\u5e94\u7684\u7ec4\u4ef6\u5df2\u7ecf\u5b89\u88c5\u597d\u7684\u60c5\u51b5\u4e0b\u624d\u80fdreact-native link<\/code>\u3002react-native link<\/code>\u4e4b\u540e\u9700\u91cd\u65b0\u7f16\u8bd1\uff01<\/p>\n<\/blockquote>\n
\u901a\u8fc7 link \u6765\u7406\u89e3\u4e0bReact Native\u7684\u67b6\u6784\uff1ajs\u73af\u5883 -> jsBridge -> native\u73af\u5883<\/p>\n
\u4e1a\u52a1\u903b\u8f91\u662fReactJs\u5904\u7406\uff0cUI\u7528react\u5199\uff0c\u4f46\u5b9e\u9645\u6865\u63a5\u6210Native<\/p>\n
ref\u5c5e\u6027<\/h3>\n
ref\u7684\u4e24\u79cd\u5c5e\u6027\uff1aString\u5c5e\u6027\u548c\u56de\u8c03\u5c5e\u6027\uff08\u7ec4\u4ef6render\u6e32\u67d3\u5b8c\u6210\u540e\u7684\u56de\u8c03\uff09<\/p>\n
\u5b98\u7f51\uff1ahttps:\/\/facebook.github.io\/react\/docs\/more-about-refs.html#the-ref-callback-attribute<\/a><\/p>\n
this callback will be executed immediately after the component is mounted\uff08\u7ec4\u4ef6render\u4e4b\u540eDidMount\u4e4b\u524d\uff09<\/p>\n
\u6848\u4f8b<\/h3>\n
\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\n'use strict';\nimport React, { Component } from 'react';\nimport {\n    AppRegistry,\n    Dimensions,\n    Image,\n    TouchableHighlight,\n    ScrollView,\n    StyleSheet,\n    Text,\n    View\n} from 'react-native';\n\nimport Camera from 'react-native-camera';\n\nclass RNAPP extends Component {\n    render() {\n        return (\n            <View style={styles.container}>\n                <Camera\n                    ref = {(cam) => {\n                        this.camera = cam;\n                    }}\n                    style={styles.preview}\n                    aspect={Camera.constants.Aspect.fill}\n                    >\n                    <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[\u70b9\u51fb\u62cd\u7167]<\/Text>\n                <\/Camera>\n            <\/View>\n        );\n    }\n\n    takePicture() {\n        this.camera.capture()\n            .then(\n                (data) => console.log(data)\n                \/\/Object {path: "file:\/\/\/storage\/emulated\/0\/DCIM\/IMG_20161003_083639.jpg"}\n            )\n            .catch(\n                err => console.error(err)\n            );\n  }\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1\n    },\n    preview: {\n        flex: 1,\n        justifyContent: 'flex-end',\n        alignItems: 'center',\n        height: Dimensions.get('window').height,\n        width: Dimensions.get('window').width\n    },\n    capture: {\n        flex: 0,\n        backgroundColor: '#fff',\n        borderRadius: 5,\n        color: '#000',\n        padding: 10,\n        margin: 40\n    }\n});\n\nAppRegistry.registerComponent('RNAPP', () => RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
react-native-camera\uff1aA Camera component for React Native […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-512","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}