react-native 展示本地所有图片

最新推荐文章于 2022-12-28 09:07:41 发布

milline

最新推荐文章于 2022-12-28 09:07:41 发布

阅读量1k

点赞数 1

分类专栏： react-native 文章标签： react-native 图片选择器

本文链接：https://blog.csdn.net/weixin_41177814/article/details/102667347

版权

本文档介绍如何在react-native项目中实现显示本地所有图片并允许选择的功能。由于现有的组件无法满足自定义UI的需求，作者提供了原生的Android和iOS解决方案。在Android部分，详细说明了GetLocalPhotosPackage.java和MainApplication.java的实现；在iOS部分，利用CameraRoll API获取图片。在react-native端，可以通过Example.js进行调用，并提示在FlatList性能优化上可以使用removeClippedSubviews属性。

摘要由CSDN通过智能技术生成

react-native 显示本地所有图片

目的：获取本地所有图片并展示、提供选择（github上没有找到适合的组件，都是直接打开本地相册选择，这样就不能自定义选择界面UI，因此写了原生方法，仅供参考）

Android

GetLocalPhotosPackage.java文件
MainApplication.java中的导入
↓↓↓
跟其他步骤一样这里就不写了（不懂得看一下react-native跟原生android的交互）

GetLocalPhotosModule.java

package com.demo.baidulocation; // 自己的包名

import android.content.Intent;
import android.R.string;
import android.graphics.Bitmap;
import android.net.Uri;
import android.provider.MediaStore;
import android.os.Bundle;
import android.database.Cursor;

import java.lang.Thread;
import java.lang.Runnable;
import java.util.List;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.io.File;
import org.json.JSONArray;
import org.json.JSONObject;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;

public class GetLocalPhotosModule extends ReactContextBaseJavaModule {
   

    GetLocalPhotosModule(ReactApplicationContext reactContext) {
   
        super(reactContext);
    }

    @Override
    public String getName() {
   
        return "GetLocalPhotos";
    }

    @ReactMethod
    private void getAllPhotoInfo(final Promise promise) {
   
        new Thread(new Runnable() {
   
            @Override
            public void run() {
   
                JSONArray allPhotosTemp = new JSONArray(); //所有照片
                JSONObject mediaBeen = null;
                Uri mImageUri = MediaStore