React Native之调用安卓的原生控件recyclerview

最新推荐文章于 2024-12-18 11:12:32 发布

FOXFarm

最新推荐文章于 2024-12-18 11:12:32 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fox_wei_hlz/article/details/69570857

React Native 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在ReactNative中封装高级安卓组件RecyclerView，并通过自定义适配器和视图持有者实现数据绑定及样式定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天学习了React Native关于一些安卓的调用的。但是网络上面的很少关于recyclerview等这样的高级的分装。主要可能会偏向简单的一些Toast ，Log这些原生控件。

现在我就来讲解一下关于高级一点的控件。以及如何使用会更加方便。我是安卓开发的。所以在调用安卓的时候。我第一个想到的是去开android studio这个。所以我尝试了一下，效果如下，看起来很不错的样子。因为今天我遇到了一个问我这个问题。结果呢，我直接說很大的情况是他在类里面的包名出问题了。结果还真是，如果使用了android studio会避免这个问题。因为这个东西会给你报错的。

好了，下面我进入正式的安卓的调用篇~~~~在截图里面各位看到了

 ImageLoaderUitl  ReactListViewManager MyViewHolder CustomAdapter MainApplication
 这个几个类，也是最重要的：那么我们第一步该怎么做呢？
	第一步：我们要封装recyclerview，首先写出它的属性和继承。之前我们是直接在布局里面调用就好。但是现在变成代码了

public class ReactListViewManager extends SimpleViewManager<RecyclerView> {
    private List<ListViewCell> list = new ArrayList<>();
    private RecyclerView recyclerView;
    private CustomAdapter mAdapter;

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

    @Override
    protected RecyclerView createViewInstance(ThemedReactContext reactContext) {
        mAdapter = new CustomAdapter(list);
        return new RecyclerView(reactContext);
    }
    @ReactProp(name = "src")
    public void setSrc(RecyclerView view,@Nullable ReadableMap src) {

        view.setHasFixedSize(true);
            RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(view.getContext());
            view.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));//设定了使得形成俩行（可以制作瀑布流）
            view.setItemAnimator(new DefaultItemAnimator());
            view.setAdapter(mAdapter);
            prepareMovieData(src);
    }

    @ReactProp(name = "customStyle")
    public void setBorderRadius(RecyclerView view, @Nullable ReadableMap src) {
        mAdapter.setStyles(src);
    }
    private void prepareMovieData(ReadableMap map){
        ReadableArray obj = map.getArray("name");
        for(int i = 0; i <obj.size() ; i++){
            ReadableMap objMap = obj.getMap(i);
            ListViewCell cell = new ListViewCell(objMap.getString("picture"),objMap.getString("title"));
            list.add(cell);
        }
        mAdapter.notifyDataSetChanged();
    }

}
public class ListViewCell {
    private String picture, title;

    public ListViewCell(String picture,String title) {
        this.picture = picture;
        this.title = title;
    }

    public ListViewCell(String picture, String genre, String year) {
        this.picture = picture;
    }

    public String getpicture() {
        return picture;
    }
    public String getSubtitle() {
        return title;
    }

}
代码如上面，可以继续去调整，主要的是继续的刷新这个蛮重要的。其中的src是我们传入的值
 第二步呢，我们需要一个适配器，和我们的一个类的控制，以及我们的子布局这个时候就可以像安卓一样布置了。

public class MyViewHolder extends RecyclerView.ViewHolder  {
    public ImageView picture;
    public TextView  title;

    public MyViewHolder(View view) {
        super(view);
        picture = (ImageView) view.findViewById(R.id.title);
        title = (TextView) view.findViewById(R.id.subtitle);

    }

    public MyViewHolder(View view, Float fontSize, String fontColor, int padding) {
        super(view);
        picture = (ImageView) view.findViewById(R.id.title);
        title = (TextView) view.findViewById(R.id.subtitle);
       //title.setBackgroundResource(R.mipmap.ic_launcher);


        title.setTextSize(fontSize);
        title.setTextColor(Color.parseColor(fontColor));
        view.setPadding(padding,padding,padding,padding);

    }
}
public class CustomAdapter extends RecyclerView.Adapter<MyViewHolder> {
    String TAG = "react";
    Float fontSize;
    int padding;
    String fontColor;
    private List<ListViewCell> list;

    public CustomAdapter(List<ListViewCell> list) {
        this.list = list;
    }

    public void setStyles(ReadableMap src){
        fontColor = src.getString("fontColor");
        fontSize = Float.parseFloat(src.getString("fontSize"));
        padding =  Integer.parseInt(src.getString("padding"));
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
//        View itemView = null;
//        if(itemView == null){
//            itemView = LayoutInflater.from(parent.getContext())
//                    .inflate(R.layout.movie_list_row, parent, false);
//        }else

        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.movie_list_row, parent, false);
        return new MyViewHolder(itemView,fontSize,fontColor,padding);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        ListViewCell listViewCell = list.get(position);
        ImageLoader.getInstance().displayImage(listViewCell.getpicture(),holder.picture);
        holder.title.setText(listViewCell.getSubtitle());
    }

    @Override
    public int getItemCount() {
        return list.size();
    }


}

如上面，布局代码就不贴出来了！！！！！，起码做到这一步其实快接近做完了。

但是我要添加一些东西，比如图片使用安卓的这些
第三步：写一个图片的控制类：

public class ImageLoaderUitl {
    private static final String PATH = Environment.getExternalStorageDirectory().getAbsolutePath() + "/MyAgentImage/Cache";
    public  static DisplayImageOptions options = null;
    public  static DisplayImageOptions options1 = null;
    public  static DisplayImageOptions options2 = null;
    public static ImageLoader mImageloader = null;
    public static synchronized void InitData(Context ctx) {

        OttoUtil.getInstance().register(ImageLoaderUitl.class);
        if (mImageloader == null) {
            File file = new File(PATH);//缓存在sd卡
            if(!file.exists()){

                file.mkdir();
            }
            ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                    ctx)
                    .denyCacheImageMultipleSizesInMemory()
                    .memoryCache(new LruMemoryCache(2 * 1024 * 1024))
                    .memoryCacheSize(2 * 1024 * 1024)
                    .diskCacheSize(50 * 1024 * 1024)
                    .diskCacheFileCount(1000)
                    .diskCache(new UnlimitedDiskCache(file))
                    .build();
            ImageLoader.getInstance().init(config);
            mImageloader = ImageLoader.getInstance();
        }


        if(options == null) {
            BitmapFactory.Options op = new BitmapFactory.Options();
            op.inPurgeable = true;
            op.inInputShareable = true;
            op.inSampleSize = 4;
            options = new DisplayImageOptions.Builder()
                    .cacheInMemory(true)      //启用内存缓存
                    .cacheOnDisk(true) //启用外存缓存
                    .bitmapConfig(Bitmap.Config.RGB_565)    //设置图片的质量
                    .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default
                    .displayer(new SimpleBitmapDisplayer()) // default
                    .build();
            options1 = new DisplayImageOptions.Builder()
                    .decodingOptions(op)
                    .cacheInMemory(true)      //启用内存缓存
                    .cacheOnDisk(true) //启用外存缓存
                    .bitmapConfig(Bitmap.Config.RGB_565)    //设置图片的质量
                    .imageScaleType(ImageScaleType.IN_SAMPLE_POWER_OF_2) // default
                    .displayer(new SimpleBitmapDisplayer()) // default
                    .build();

        }
    }
    public static void ImageLoad(String url, ImageView imageView) {
        if (imageView == null || TextUtils.isEmpty(url))
            return;
        mImageloader.displayImage(url, new ImageViewAware(imageView,false), options1, null, null);
    }
    /**
     * 将url转成bitmap
     * @param url
     * @return
     */
    public static Bitmap getBitmapReturn(String url){
        Bitmap bitmap = ImageLoader.getInstance().loadImageSync(url);
        return bitmap;

    }
}

代码如上面，然后呢，我们还需要做一件大事件了

第四步：注册一个React Page包，这个注册也有一个好处多次复用

public class ListViewPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new ReactListViewManager()
        );
    }
}

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 ListViewPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    ImageLoaderUitl.InitData(this);
    SoLoader.init(this, /* native exopackage */ false);
  }
}

上述代码就到这边了。

如果感觉对你有帮助点一个赞~