React-Native系列Android——自定义View组件开发

最新推荐文章于 2021-11-14 10:13:39 发布

MegatronKing

最新推荐文章于 2021-11-14 10:13:39 发布

阅读量9.1k

点赞数 1

分类专栏： React-Native 文章标签： android javascript java

本文链接：https://blog.csdn.net/MegatronKings/article/details/50959518

版权

本文以GradientColorView为例，详述React-Native中如何自定义原生View组件并实现在JS中调用。从Java层的自定义View、ViewManager注册到JS层组件开发，再到组件的使用，详细讲解整个开发流程和步骤。

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

React-Native是由ReactJS发展而来，继承了其JavaScript XML（简称JSX）和组件化等特性。JSX是一种XML语言，用于视图层级搭建。而组件化是一种设计思想，具有易于维护组合和便于扩展等优点，React-Native中无论是原生Java层，还是JS层，都遵循了这种思想。

在Android原生Java端的组件分为两种类型：视图组件（View）和功能组件（Module），React-Native官方为开发者提供了大量的常用组件，位于com.facebook.react.views包和com.facebook.react.modules包下面，基本覆盖了所有类型的组件，包括文本，输入框，图片等。

本文GradientColorView（颜色渐变视图）为例，演示如何自定义一个原生View组件，并在JS中调用。

1、Java层自定义GradientColorView

package com.myproject;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.GradientDrawable;
import android.graphics.drawable.GradientDrawable.Orientation;
import android.view.View;

public class GradientColorView extends View {
   

    private GradientDrawable mDrawable;

    private int mStartColor;
    private int mEndColor;

    public GradientColorView(Context context) {
        super(context);
        mDrawable = new GradientDrawable();
        mDrawable.setOrientation(Orientation.LEFT_RIGHT);
    }

    public void setStartColor(int startColor) {
        this.mStartColor = startColor;
    }

    public void setEndColor(int endColor) {
        this.mEndColor = endColor;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mDrawable.setBounds(0, 0</