2. 程式人生 > >React-Native系列Android自定義原生UI元件

React-Native系列Android自定義原生UI元件

阿新 • • 發佈：2019-01-25

由於官方的Android原生UI元件解釋的並不是很完整，根據個人的不斷摸索，終於成功完成原生元件的製作，所以寫下這篇文章作為記錄，也給讓小白們少走些彎路。

我這裡通過講解制作一個繪圓元件的流程，來學習製作android原生UI元件。這個繪圓元件並沒有實際的使用價值，只是為了更容易的瞭解android原生UI元件的製作過程。好了廢話不多說，現在開始吧。

  • react-native版本：0.33.0

首先初始化react-native專案，最好能弄個VPN

react-native init AndroidNativeModule

初次build android專案，先開啟虛擬機器或連線手機。

react-native run-android

專案的建立就講到這，詳細的專案建立和排錯請自行百度。現在我們用Android Stuido進入android專案。

  • 建立基本的UI元件框架，這裡元件名稱嚴格更具功能進行命名，為了看的更清楚進行了一些打包
    專案目錄

    • CircleManager.java CIrcle原生元件管理器，實現JS和JAVA資訊傳遞
    • CircleView.java Circle原生元件
    • MainPackage.java 自定義元件註冊包

接下來給建立好的java新增基本結構，然後在後面更具需要新增細節功能

  • CircleView.java 基礎結構
package
 
 com.androidnativemodule.module.circle;

import android.content.Context;
import android.view.View;

/**
 * 圓形元件元件基礎類
 */
public class CircleView extends View {

    public CircleView(Context context) {
        super(context);
    }
}

UI元件繼承於View類，這裡沒有加什麼功能，就建立一個基本的類

  • CircleManager.java
package com.androidnativemodule.module.circle;

import
 
 com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

/**
 * 圓形元件基礎類管理器
 */
public class CircleManager extends SimpleViewManager<CircleView> {

    /**
     * 設定js引用名
     * @return String
     */
    @Override
    public String getName() {
        return "MCircle";
    }

    /**
     * 建立UI元件例項
     * @param reactContext
     * @return CircleView
     */
    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }
}

所有的元件管理器需要繼承SimpleViewManager類，後面加上自己定義的元件基礎類，下面2個方法是SimpleViewManager類的必須實現的方法，記住getName()返回的名字要和JS裡的應用名進行統一。

  • MainPackge.java
package com.androidnativemodule;

import com.androidnativemodule.module.circle.CircleManager;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.Arrays;
import java.util.Collections;
import java.util.List;

/**
 * 自定義元件模組註冊類
 */
public class MainPackage implements ReactPackage {

    /**
     * 建立原生模組
     * @param reactContext
     * @return
     */
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

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

    /**
     * 建立原生UI元件控制器
     * @param reactContext
     * @return
     */
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
            new CircleManager()
        );
    }
}

這個是註冊類，實現ReactPackage介面，可以想自己設計的元件統一寫在這個類中，然後一起在Application中註冊，注意：返回空值需要返回Collections.emptyList()。它還可以註冊原生模組，這個官方有詳細的講解，地址如下：http://facebook.github.io/react-native/docs/native-modules-android.html

註冊類寫好後，還需要將這個類載入進Application中，我們在通過MainApplication中將其加入進去。

  • MainApplication.java
package com.androidnativemodule;

import android.app.Application;
import android.util.Log;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new MainPackage() // 在這裡載入我們自己的註冊類
      );
    }
  };

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

到這裡我們的自定義UI元件框架基本完成，我們可以run一下看看，如果沒有效果，可以嘗試重新react-native run-android 下。

在Android Monitor中可以看到已經載入了我們的CircleModule，只有有沒我們JS並沒有例項話他，所以Could not find generated setter for class com.androidnativemodule.module.circle.CircleManager。
Android Monitor截圖

接下來我們給我們的原生UI元件加上功能。

  • CircleView.java
package com.androidnativemodule.module.circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

/**
 * 圓形元件元件基礎類
 */
public class CircleView extends View {

    private final String TAG = "CircleView";
    private Paint mPaint; // 畫筆

    public CircleView(Context context) {
        super(context);
        mPaint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(100, 100, 100, mPaint); // 畫一個半徑為100px的圓
        Log.d(TAG, "繪圖");
    }
}

這裡我先在CircleView內寫死程式碼，看看這個原生UI到底能不能在JS中使用

現在我們來到react-native專案，我們先定製一個Circle元件的JS介面，方便其他元件呼叫。

  • 建立Circle.js
import { PropTypes } from 'react';
import { requireNativeComponent, View } from 'react-native';

const MCircle = requireNativeComponent('MCircle', {
  propTypes: {
    ...View.propTypes // 包含預設的View的屬性
  },
});

export default MCircle;

使用requireNativeComponent根據先前在管理器中定義好的元件名引用原生元件，由於我們還沒建立介面，所以這個元件暫時只有父類View的介面。

現在我們在index.android.js中例項化元件看看效果

  • index.android.js
'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Circle from './Circle';

class AndroidNativeModule extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Circle style={{width: 100, height: 100}} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('AndroidNativeModule', () => AndroidNativeModule);

效果圖：
模擬器截圖

可以看到成功使用Android canvas 畫了一個圓

現在我們給他加一些介面，從而實現JS和JAVA的通訊，直接在JS中更改元件樣式。

  • CircleView.java
package com.androidnativemodule.module.circle;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.Log;
import android.view.View;

import com.facebook.react.uimanager.PixelUtil;

/**
 * 圓形元件元件基礎類
 */
public class CircleView extends View {

    private final String TAG = "CircleView";
    private Paint mPaint; // 畫筆
    private float mRadius;  // 圓的半徑

    public CircleView(Context context) {
        super(context);
        mPaint = new Paint();
    }

    /**
     * 設定圓的背景色
     * @param color
     */
    public void setColor(Integer color) {
        mPaint.setColor(color); // 設定畫筆顏色
        invalidate();   // 更新畫板
    }

    /**
     * 設定圓的半徑
     * @param radius
     */
    public void setRadius(Integer radius) {
        /**
         * 由於JS傳過的數字是dip單位,需要轉換為實際畫素
         * 使用com.facebook.react.uimanager包中的PixelUtil,進行轉換
         */
        mRadius = PixelUtil.toPixelFromDIP(radius);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); // 畫一個半徑為100px的圓
        Log.d(TAG, "繪圖");
    }
}

這裡添加了2個介面，實現對圓的大小和顏色更改，還使用了PixelUtil實現畫素的轉換

  • CircleManager.java
package com.androidnativemodule.module.circle;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;

/**
 * 圓形元件基礎類管理器
 */
public class CircleManager extends SimpleViewManager<CircleView> {

    /**
     * 設定js引用名
     * @return String
     */
    @Override
    public String getName() {
        return "MCircle";
    }

    /**
     * 建立UI元件例項
     * @param reactContext
     * @return CircleView
     */
    @Override
    protected CircleView createViewInstance(ThemedReactContext reactContext) {
        return new CircleView(reactContext);
    }

    /**
     * 傳輸背景色引數
     * @param view
     * @param color
     */
    @ReactProp(name = "color")
    public void setColor(CircleView view, Integer color) {
        view.setColor(color);
    }

    /**
     * 傳輸半徑引數
     * @param view
     * @param radius
     */
    @ReactProp(name = "radius")
    public void setRadius(CircleView view, Integer radius) {
        view.setRadius(radius);
    }
}

管理器中引用介面，將引數傳輸過去

現在我們的CircleModule已經完成了，然後我們修改下Circle元件JS介面，實現介面使用。

  • Circle.js
'use strict';

import React, { Component, PropTypes } from 'react';
import {
  View,
  requireNativeComponent,
  processColor  // 字元Color轉換為數字
} from 'react-native';

const MCircle = requireNativeComponent('MCircle', {
  propTypes: {
    color: PropTypes.number,
    radius: PropTypes.number,
    ...View.propTypes // 包含預設的View的屬性
  },
});

class Circle extends Component {

  static propTypes = {
    radius: PropTypes.number,
    color: PropTypes.string, // 這裡傳過來的是string
    ...View.propTypes // 包含預設的View的屬性
  }

  render() {
    const { style, radius, color } = this.props;

    return (
      <MCircle
        style={style}
        radius={radius}
        color={processColor(color)}
      />
    );
  }

}

module.exports = Circle;

由於color使用的是String，我們可以用react-native的processColor將其轉換為數字，從而可以讓java識別出顏色，為了方便使用，所以我這邊重寫建立了Component，作為中間元件，對color進行轉換。

然後我的就可以通過Circle.js使用CircleModule了，例如：

<Circle
  style={{width: 100, height: 100}}
  color="#25c5f7"
  radius={50}
/>

效果圖：
模擬器截圖

到此Android自定義原生UI元件CircleModule的設計就結束了，如果有錯誤的地方，大家可以指出來反饋給我，也希望大家可以將自己的react-native開發心得分享出來，大家一起來學習。

相關推薦

React-Native系列Android自定義原生UI元件

由於官方的Android原生UI元件解釋的並不是很完整，根據個人的不斷摸索，終於成功完成原生元件的製作，所以寫下這篇文章作為記錄，也給讓小白們少走些彎路。 我這裡通過講解制作一個繪圓元件的流程，來學習製作android原生UI元件。這個繪圓元件並沒有實際的使用

【稀飯】react native 實戰系列教程之自定義原生UI元件

上一節，講了關於RN的自定義原生模組，本節是關於自定義原生UI元件，學習完本節，你將瞭解到原生UI元件的開發流程，以及js如何向native傳送命令和native如何向js傳送事件。 原生UI元件之VideoView視訊播放器開發 React Nativ

React-Native系列Android——Native與Javascript通信原理（一）

from 直接 最新 一點 明顯 rem 負責 receive esp React-Native最核心的是Native與Javascript之間的通信，並且是雙向通信

react-native中使用自定義的字體圖標iconfont

字體 nts amp tex native 使用 文件 class demo iconfont圖標庫下載 可在 http://www.iconfont.cn 下載 下載完成後的目錄中有字體文件： iconfont.ttf 拷貝字體文件 Android: 在 An

React Native如何實現自定義字型

在做web端開發時用到了不少字型圖示庫，在web端設定字型圖示很簡單，就是用一個@font-face設定自定義字型，那麼用react native開發安卓app時如何設定字型圖示呢？ 　 react-native-vector-icons 首先srea

React Native實現一個自定義模組

概述在 前期介紹React Native 專案結構的時候，我們講解過React的專案組成，其中說過 node_modules 資料夾，這是一個存放 node 模組的地方。我們知道React是用npm來管

從零學React Native之04自定義對話方塊

本篇主要介紹： 1. 自定義元件 2. Alert 對話方塊 自定義對話方塊 之前的我都是利用React Native提供的基礎元件對它們進行排列組合, 其實自定義也很簡單, 我們還是拿上一篇文章的例子進行擴充套件。 當我們點選註冊的時候，可以

android自定義開關控制元件-SlideSwitch

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

android-自定義組合控制元件(EditText+選項)

一.前言 在開發中，或許一個業務需求中會出現很多系統控制元件組合成的佈局，並且經常需要複用。比如在一個表單中,裡面有個編輯框EditText右側還需要有個選項卡按鈕,需要有編輯框的輸入功能也需要有右側選項卡的點選事件,同時這兩個控制元件也存在一定關聯,且在一個介

Android自定義複合控制元件

       在Android中，複合控制元件是非常常見的，下面以建立一個標題欄為例，講解建立自定義複合控制元件的過程。        以下圖為例：我們要建立一個標題欄，這個標題欄是由左邊的Button、右邊的Button以及中間的TextView複合而成的，而我們希望能夠

android自定義view控制元件之一圓角背景TextView

繼昨天寫了一個TextView可以包括兩種不同的風格字型，而保證可以換行的情況下的自定義View。今天的正文還是寫一個自定義的TextView。 一慣風格首先亮出實現效果，這最是直接不過的了。看下圖： 其實不通過寫一個自定義view的方式也可以實現這個效果，但是就需你在你

android 自定義組合控制元件 頂部導航欄

    在軟體開發過程中，經常見到，就是APP 的標題欄樣式幾乎都是一樣的，只是文字不同而已，兩邊圖示不同。為了減少重複程式碼，提高效率， 方便大家使用，我們把標題欄通過組合的方式定義成一個控制元件。 例下圖：                                

Android 自定義RatingBar控制元件，顯示不全問題

最近專案要用到 自定義RatingBar控制元件 但是自定義好了樣式發現，星星只顯示一半，於是在網上找各種解決方法。 最後竟然是直接把資源圖片，移動到較高解析度的資料夾裡面。 我的解決做法如下，如果有更好的方法，請留言告知。 一，先寫一個drawable，設定好backg

【REACT NATIVE 系列教程之四】重新整理元件RENDER(重新渲染)的三種方式詳解

開發過遊戲的都應該很清楚，“刷屏”是多麼的重要。其實開發應用也如此，當元件的資料被修改後，如何及時更新元件呈現出最新的資料與效果一樣至關重要。那麼這裡Himi大概講三種常用的方式：this.setState()  【最為常用】這是在事件處理函式中和請求回撥函式中觸發 UI 更新的主要方法。一般情況下setSt

Android自定義倒計時控制元件

序： 最近越來越多的APP都是用手機號註冊，一是為了方便使用者記憶，二是為了增加使用者賬戶的安全性。在我們進行交易操作或者修改密碼等操作的時候，這時候需要輸入簡訊驗證碼。這個控制元件會需要有倒計時的功能，這裡主要總結常見的幾種實現方式。 1.Android中實現倒計時

Android自定義電池控制元件

一、背景最近公司有個業務，需要自定義一個電池控制元件，因此自己按照UI圖編寫了一個自定義View。二、效果三、實現過程首先看下視覺給出的UI效果圖 從這裡我們可以看得出來，要自定義這個電池View的話，分為3部分來繪製。第一部分是電池頭第二部分是電池邊框第三部分是電池電量3.

Android 自定義日曆控制元件

有圖有真像： 日曆控制元件View： /** * 日曆控制元件 功能：獲得點選的日期區間 * */ public class CalendarView extends View implements View.OnTouchListener { priv

Android自定義組合控制元件之實現CheckBox變化

前言：自定義組合控制元件最大的好處就是複用性，可以為我們節省不少程式碼量，但是一般我們自定義組合控制元件的時候，封裝出來的控制元件不管是自己用還是別人用也好，封裝的程式碼最好是易讀性強，便於修改，沒有必要封裝太多的屬性，一般控制在兩三個屬性為最佳，畢竟我們不是Google.

【我的Android進階之旅】Android自定義電池控制元件

一、背景 最近公司有個業務，需要自定義一個電池控制元件，因此自己按照UI圖編寫了一個自定義View。 二、效果 三、實現過程 首先看下視覺給出的UI效果圖 從這裡我們可以看得出來，要自定義這個電池View的話，分為3部分來

android 自定義倒計時控制元件（圓形倒計時顯示）

先上效果圖 - 倒計時結束 程式碼塊 attr.xml 控制元件需要用到的屬性： <?xml version="1.0" encoding="utf-8"?> <resources> <de