{"id":511,"date":"2023-02-25T14:25:49","date_gmt":"2023-02-25T06:25:49","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=511"},"modified":"2023-04-29T20:46:17","modified_gmt":"2023-04-29T12:46:17","slug":"react-native-learning-cameraroll-api","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-cameraroll-api\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4bCameraRoll API"},"content":{"rendered":"<p>CameraRoll \u6a21\u5757\u63d0\u4f9b\u4e86\u5bf9\u624b\u673a\u4e2d\u4fdd\u5b58\u7684\u56fe\u7247\u3001\u89c6\u9891\u6587\u4ef6\u8fdb\u884c\u904d\u5386\u8bbf\u95ee\u4e0e\u64cd\u4f5c\u3002\u63d0\u4f9b\u4e24\u4e2a\u9759\u6001\u65b9\u6cd5\uff1a<code>getPhotos<\/code>\u548c<code>saveToCameraRoll<\/code> \/ <code>saveImageWithTag<\/code><\/p>\n<h2>getPhotos<\/h2>\n<p>\u53ef\u4ee5\u5f97\u5230\u624b\u673a\u4e2d\u6240\u6709\u7684\u56fe\u7247\u548c\u89c6\u9891\uff08\u4e0d\u4ec5\u4ec5\u662f\u4f7f\u7528\u6444\u50cf\u5934\u62cd\u6444\u7684\u7167\u7247\u3001\u89c6\u9891\uff0c\u8fd8\u6709\u5404\u4e2a\u5e94\u7528\u81ea\u5df1\u4e0b\u8f7d\u5230\u624b\u673a\u7684\u56fe\u7247\u4e0e\u89c6\u9891\uff09<\/p>\n<p><!-- more --><\/p>\n<pre><code class=\"language-javascript\">static getPhotos(params: object)<\/code><\/pre>\n<p>\u8fd4\u56de\u4e00\u4e2a\u5e26\u6709\u56fe\u7247\u6807\u8bc6\u7b26 JSON \u5bf9\u8c61\u7684 Promise<\/p>\n<p>params\uff1a\u5bf9\u8c61\uff0c\u4e00\u4e9b\u7b5b\u9009\u7684\u89c4\u5219\uff0c\u67094\u4e2a\u6210\u5458\u53d8\u91cf<\/p>\n<ul>\n<li><code>first<\/code>\uff1a\u6570\u503c\uff0c\u5e0c\u671b\u83b7\u53d6\u591a\u5c11\u5f20\u56fe\u7247\u7684\u4fe1\u606f<\/li>\n<li><code>groupTypes<\/code>\uff1a\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4\u4e3aSavedPhotos [Album All Event Faces Library PhotoStream]\uff0c\u4ec5\u652f\u6301IOS\u5e73\u53f0\uff0c\u7528\u6765\u6307\u5b9a\u83b7\u53d6\u56fe\u7247\u6216\u89c6\u9891\u7684\u7c7b\u578b<\/li>\n<li><code>assetType<\/code>\uff1a\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4\u4e3aPhotos [All Videos]\uff0c\u8868\u793a\u53ea\u83b7\u53d6\u56fe\u7247 <\/li>\n<li><code>after<\/code>\uff1a\u5b57\u7b26\u4e32\uff0c\u7528\u6765\u8bb0\u5f55\u4e0a\u4e00\u6b21\u83b7\u53d6\u56fe\u7247\u7684\u7ed3\u675f\u6807\u5fd7\uff0c\u65b9\u4fbf\u53ef\u4ee5\u63a5\u7740\u4e0a\u6b21\u7684\u4f4d\u7f6e\u7ee7\u7eed\u83b7\u53d6\u3002\u5b83\u7684\u503c\u4e0d\u80fd\u7531\u5f00\u53d1\u8005\u968f\u610f\u8d4b\u4e88\uff0c\u800c\u662f\u5e94\u5f53\u5728\u4e0a\u4e00\u6b21\u83b7\u53d6\u56fe\u7247\u540e\u4fdd\u5b58\u5176\u503c\u3002\u901a\u5e38\uff0c\u5728Android\u5e73\u53f0\uff0c\u4e00\u5f00\u59cb\u5c31\u7ed9\u8fd9\u4e2a\u503c\u4e3anull\uff0c\u4f46\u662f\u5728IOS\u5e73\u53f0\uff0c\u8bbe\u7f6e\u4e3anull\u4f1a\u629b\u4e00\u4e2a\u65e0\u6cd5\u6355\u6349\u7684\u5f02\u5e38\uff0c\u5bfc\u81f4\u7ea2\u5c4f\u3002<\/li>\n<\/ul>\n<blockquote>\n<p>\u6ce8\u610f\uff1a\u4e0d\u7ba1\u662fAndroid\u5e73\u53f0\u8fd8\u662fiOS\u5e73\u53f0\uff0c\u5f97\u5230\u7684image\u5bf9\u8c61\uff0c\u53ef\u4ee5\u4f5c\u4e3a\u4e00\u4e2a\u6574\u4f53\uff0c\u4f20\u9012\u7ed9Image\u7ec4\u4ef6\uff0c\u7528\u6765\u663e\u793a\u56fe\u7247\u3002<\/p>\n<\/blockquote>\n<p>\u53ef\u4ee5\u5206\u6279\u6b21\u8bfb\u53d6\u624b\u673a\u4e2d\u7684\u6240\u6709\u56fe\u7247\uff1a\u76d1\u542cScrollView\u6ed1\u52a8\u5230\u5e95\u90e8\u65f6\uff0c\u7ee7\u7eed<code>getPhotos<\/code>\uff0c\u8fd9\u65f6\u9700\u8981\u7528after\u6210\u5458\u53d8\u91cf\uff0c\u9012\u5f52\u8c03\u7528<code>getPhotos<\/code>\uff0c\u5f53<code>page_info.has_next_page = false<\/code>\u65f6\u8fd4\u56de\u3002<\/p>\n<p>CameralRoll \u5728 iOS \u5e73\u53f0\u4e2d\u9700\u8981\u6dfb\u52a0\u94fe\u63a5\u5e93\u624d\u80fd\u8fd0\u884c\uff0c\u5426\u5219\u62a5\u9519\u627e\u4e0d\u5230API\uff1a<\/p>\n<ul>\n<li><code>node_modules\\react-native\\Libraries\\CameraRoll<\/code>\u4e0b\u7684 Xcode \u9879\u76ee\u6587\u4ef6<code>RCTCameraRoll.xcodeproj<\/code>\u62d6\u52a8\u5230\u5f53\u524d Xcode \u9879\u76ee\u7684 Libraries \u76ee\u5f55\u3002<\/li>\n<li>\u9009\u4e2d\u5f53\u524d\u9879\u76ee\uff0c\u5728\u53f3\u8fb9\u9009\u62e9 Build Phases\uff0c\u70b9\u51fb\u6253\u5f00\u5b50\u9879\u76ee Link Binary With Libraris\u3002<\/li>\n<li>\u6253\u5f00\u7b2c\u4e00\u6b65\u63d2\u5165\u7684<code>RCTCameraRoll.xcodeproj<\/code>\uff0c\u518d\u6253\u5f00\u5b83\u7684\u5b50\u76ee\u5f55 Products\uff0c\u5c06\u5b50\u76ee\u5f55\u4e0b\u7684<code>libRCTCameraRoll.a<\/code>\u6587\u4ef6\u62d6\u5230 Link Binary With Libraris \u5217\u8868\u4e2d\u3002<\/li>\n<li>\u4f7f\u7528 Xcode \u91cd\u65b0\u8fd0\u884c\u9879\u76ee\u3002<\/li>\n<\/ul>\n<h2>saveToCameraRoll \u548c saveImageWithTag(\u5df2\u8fc7\u65f6)<\/h2>\n<p>\u4fdd\u5b58\u4e00\u4e2a\u56fe\u7247\u5230\u76f8\u518c<\/p>\n<pre><code class=\"language-javascript\">static saveToCameraRoll(tag, type?)\nstatic saveImageWithTag(tag)<\/code><\/pre>\n<p>\u8fd4\u56de\u4e00\u4e2aPromise\uff0c\u64cd\u4f5c\u6210\u529f\u65f6\u8fd4\u56de\u65b0\u7684URI<\/p>\n<p>\u5728\u5b89\u5353\u4e0a\uff0ctag \u53c2\u6570\u662f\u4e00\u4e2a\u672c\u5730URI\uff08\u662f\u628a\u672c\u5730\u7684\u56fe\u7247\u4fdd\u5b58\u5230\u76f8\u518c\u4e2d\uff09\uff0c\u4f8b\u5982&quot;file:\/\/\/sdcard\/img.png&quot;.<\/p>\n<p>\u5728iOS\u8bbe\u5907\u4e0a tag \u53c2\u6570\u53ef\u80fd\u662f\u4ee5\u4e0b\u4e4b\u4e00\uff1a<\/p>\n<ul>\n<li>\u672c\u5730URI<\/li>\n<li>\u8d44\u6e90\u5e93\u7684\u6807\u7b7e<\/li>\n<li>\u975e\u4ee5\u4e0a\u4e24\u79cd\u7c7b\u578b\uff0c\u8868\u793a\u56fe\u7247\u6570\u636e\u5c06\u4f1a\u5b58\u50a8\u5728\u5185\u5b58\u4e2d\uff08\u5e76\u4e14\u5728\u672c\u8fdb\u7a0b\u6301\u7eed\u7684\u65f6\u5019\u4e00\u76f4\u4f1a\u5360\u7528\u5185\u5b58\uff09\u3002<\/li>\n<\/ul>\n<p>\u7cfb\u7edf\u80fd\u591f\u81ea\u52a8\u8bc6\u522b\u6587\u4ef6\u7c7b\u578b\uff0c \u4f60\u4e5f\u53ef\u4ee5\u4f20\u5165\u4e00\u4e2a\u53ef\u9009\u7684 type \u53c2\u6570\uff0c\u53c2\u6570\u503c\u5fc5\u987b\u4e3a &#8216;photo&#8217; \u6216\u8005 &#8216;video&#8217; \u4e4b\u4e00\u3002<\/p>\n<h2>rn-camera-roll<\/h2>\n<p>CameraRoll\u6682\u65f6\u8fd8\u4e0d\u662f\u7279\u522b\u5b8c\u5584\uff0c\u63a8\u8350\u4e00\u4e2a\u8de8\u5e73\u53f0\u7684<code>rn-camera-roll<\/code>\u3002<\/p>\n<p><code>rn-camera-roll<\/code>\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/www.npmjs.com\/package\/rn-camera-roll\">https:\/\/www.npmjs.com\/package\/rn-camera-roll<\/a><\/p>\n<p>\u5b89\u88c5\u7ec4\u4ef6<\/p>\n<pre><code>npm install rn-camera-roll --save<\/code><\/pre>\n<h2>\u4f7f\u7528\u7ec4\u4ef6<\/h2>\n<h3>iOS\uff1a\u5bfc\u5165\u5e93<\/h3>\n<pre><code>node_modules\/react-native\/Libraries\/CameraRoll\/RCTCameraRoll.xcodeproj<\/code><\/pre>\n<h3>Android\uff08react-native &gt;= v0.15\uff09\uff1a<\/h3>\n<p>\uff081\uff09\u81ea\u52a8\u66f4\u65b0gradle\u6587\u4ef6<\/p>\n<pre><code class=\"language-javascript\">react-native link rn-camera-roll<\/code><\/pre>\n<p>\uff082\uff09\u5728 MainActivity \u4e2d\u6ce8\u518c\u7ec4\u4ef6\u5305\uff08\u9700\u91cd\u65b0\u7f16\u8bd1\uff09<\/p>\n<pre><code class=\"language-javascript\">package cc.rnapp;\n\nimport android.app.Activity;\nimport android.os.Bundle;\nimport android.view.KeyEvent;\n\nimport com.facebook.react.LifecycleState;\nimport com.facebook.react.ReactInstanceManager;\nimport com.facebook.react.ReactRootView;\nimport com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;\nimport com.facebook.react.shell.MainReactPackage;\nimport com.facebook.soloader.SoLoader;\n\n\/\/ IMPORT HERE \nimport fr.bamlab.rncameraroll.CameraRollPackage;\n\/\/ --- \n\npublic class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {\n\n    private ReactInstanceManager mReactInstanceManager;\n    private ReactRootView mReactRootView;\n\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        mReactRootView = new ReactRootView(this);\n\n        mReactInstanceManager = ReactInstanceManager.builder()\n                .setApplication(getApplication())\n                .setBundleAssetName(&quot;index.android.bundle&quot;)\n                .setJSMainModuleName(&quot;index.android&quot;)\n                .addPackage(new MainReactPackage())\n\n                \/\/ REGISTER PACKAGE HERE \n                .addPackage(new CameraRollPackage())\n                \/\/ --- \n                .setUseDeveloperSupport(BuildConfig.DEBUG)\n                .setInitialLifecycleState(LifecycleState.RESUMED)\n                .build();\n\n        mReactRootView.startReactApplication(mReactInstanceManager, &quot;example&quot;, null);\n\n        setContentView(mReactRootView);\n    }\n\n    ...<\/code><\/pre>\n<h2>CameraRoll \u8303\u4f8b<\/h2>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n * @flow\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    CameraRoll,\n    Image,\n    ListView,\n    ScrollView,\n    StyleSheet,\n    Text,\n    View\n} from &#039;react-native&#039;;\n\nlet fetchParams = {\n    first: 10,\n    assetType: &#039;Photos&#039;,\n    \/\/groupTypes in not supported on Android\n    \/\/ groupTypes:&#039;All&#039;,\n};\n\nlet imgUrl = &#039;http:\/\/www.ouloon.com\/images\/&#039;;\n\nclass RNAPP extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            images: []\n        };\n    }\n\n    render() {\n        return (\n            &lt;ScrollView&gt;\n                &lt;View style={styles.row}&gt;\n                    &lt;View style={styles.flex_1} &gt;\n                        &lt;Image\n                            resizeMode=&#039;stretch&#039;\n                            style={[styles.imgHeight, styles.m5]}\n                            source={{ uri: imgUrl + &#039;ReactNative.jpg&#039; }}\n                            \/&gt;\n                    &lt;\/View&gt;\n                    &lt;View style={styles.flex_1} &gt;\n                        &lt;Image\n                            resizeMode=&#039;stretch&#039;\n                            style={[styles.imgHeight, styles.m5]}\n                            source={{ uri: imgUrl + &#039;Android.jpg&#039; }}\n                            \/&gt;\n                    &lt;\/View&gt;\n                &lt;\/View&gt;\n\n                &lt;View&gt;\n                    &lt;Text\n                        onPress={this.saveImg.bind(this, &#039;ReactNative.jpg&#039;, &#039;Android.jpg&#039;)}\n                        style={styles.saveImg}\n                        &gt;\n                        \u4fdd\u5b58\u56fe\u7247\u5230\u76f8\u518c\n                    &lt;\/Text&gt;\n                &lt;\/View&gt;\n\n                &lt;View style={styles.imageGrid} &gt;\n                {\n                    this.state.images.map((image) =&gt;\n                        &lt;Image\n                            style={styles.image}\n                            resizeMode=&#039;stretch&#039;\n                            source={image}\n                            key={image.uri}\n                            \/&gt;\n                    )\n                }\n                &lt;\/View&gt;\n            &lt;\/ScrollView&gt;\n        );\n    }\n\n    componentDidMount() {\n        let _that = this;\n        \/\/\u4ece0.20.0\u7248\u672c\u5f00\u59cb\u652f\u6301\u8fd4\u56dePromise\u673a\u5236\n        CameraRoll.getPhotos(fetchParams).then(\n            (data) =&gt; {\n                console.log(data);\n                let edges = data.edges;\n                \/\/.map \u662f\u9488\u5bf9\u6570\u7ec4\u91cc\u7684\u6bcf\u4e00\u4e2a\u5143\u7d20\uff0c\u8c03\u7528\u56de\u8c03\u51fd\u6570\n                \/\/\u7b2c\u4e00\u4e2a\u53c2\u6570\u662f\u5143\u7d20\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f\u4e0b\u6807\uff0c\u7136\u540e\u628a\u6bcf\u6b21\u8c03\u7528\u7684\u8fd4\u56de\u503c\u6309\u987a\u5e8f\u518d\u7ec4\u7ec7\u6210\u4e00\u4e2a\u65b0\u7684\u6570\u7ec4\n                let images = edges.map((edge) =&gt; {\n                    return edge.node.image;\n                });\n                _that.setState({\n                    images: images,\n                });\n            }\n        ).catch(error =&gt; {\n            console.log(&#039;\u9519\u8bef: &#039; + error);\n        });\n    }\n\n    saveImg(img1, img2) {\n        let _that = this;\n        \/\/CameraRoll.saveImageWithTag(imgUrl + img1).then(\n        CameraRoll.saveToCameraRoll(imgUrl + img1, &#039;photo&#039;).then(\n            (url) =&gt; {\n                if (url) {\n                    let images = _that.state.images;\n                    \/\/unshift() \u65b9\u6cd5\u53ef\u5411\u6570\u7ec4\u7684\u5f00\u5934\u6dfb\u52a0\u4e00\u4e2a\u6216\u66f4\u591a\u5143\u7d20\uff0c\u5e76\u8fd4\u56de\u65b0\u7684\u957f\u5ea6\u3002\n                    images.unshift({\n                        uri: url,\n                    });\n                    _that.setState({\n                        images: images,\n                    });\n\n                    \/\/\u7ee7\u7eed\u4fdd\u5b58\u7b2c\u4e8c\u5f20\u56fe\u7247\n                    \/\/CameraRoll.saveImageWithTag(imgUrl + img2).then(\n                    CameraRoll.saveToCameraRoll(imgUrl + img2, &#039;photo&#039;).then(\n                        (url) =&gt; {\n                            images.unshift({\n                                uri: url,\n                            });\n                            _that.setState({\n                                images: images,\n                            });\n                            alert(&#039;\u56fe\u7247\u5168\u90e8\u4fdd\u5b58\u6210\u529f&#039;);\n                        }\n                    ).catch(\n                        error =&gt; {\n                            alert(&#039;\u4fdd\u5b58\u7b2c\u4e8c\u5f20\u7167\u7247\u5931\u8d25: &#039; + error);\n                        }\n                    );\n                }\n            }\n        ).catch(error =&gt; {\n            alert(&#039;\u4fdd\u5b58\u7b2c\u4e00\u5f20\u7167\u7247\u5931\u8d25: &#039; + error);\n        });\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex_1: {\n        flex: 1,\n    },\n    m5: {\n        marginLeft: 5,\n        marginRight: 5,\n        borderWidth: 1,\n        borderColor: &#039;#ddd&#039;,\n    },\n    row: {\n        flexDirection: &#039;row&#039;,\n    },\n    imageGrid: {\n        flex: 1,\n        flexDirection: &#039;row&#039;,\n        flexWrap: &#039;wrap&#039;,\n        justifyContent: &#039;center&#039;,\n    },\n    image: {\n        width: 100,\n        height: 100,\n        margin: 10,\n    },\n    imgHeight: {\n        height: 180,\n    },\n\n    saveImg: {\n        flex: 1,\n        height: 30,\n        textAlign: &#039;center&#039;,\n        textAlignVertical: &#039;center&#039;,\n        marginTop: 20,\n        color: &#039;#FFF&#039;,\n        lineHeight: 20,\n        borderRadius: 5,\n        marginLeft: 5,\n        marginRight: 5,\n        fontWeight: &#039;bold&#039;,\n        backgroundColor: &#039;#3BC1FF&#039;,\n    },\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CameraRoll \u6a21\u5757\u63d0\u4f9b\u4e86\u5bf9\u624b\u673a\u4e2d\u4fdd\u5b58\u7684\u56fe\u7247\u3001\u89c6\u9891\u6587\u4ef6\u8fdb\u884c\u904d\u5386\u8bbf\u95ee\u4e0e\u64cd\u4f5c\u3002\u63d0\u4f9b\u4e24\u4e2a\u9759\u6001\u65b9\u6cd5\uff1agetPho [&hellip;]<\/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-511","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\/511","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=511"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/511\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}