提供原生檢視很簡單：

建立一個ViewManager的子類（或者更常見的，SimpleViewManage的派生類）。

實現createViewInstance方法。

匯出檢視的屬性設定器：使用@ReactProp（或@ReactPropGroup）註解。

把這個檢視管理類註冊到應用程式包的createViewManagers裡。

實現JavaScript模組。

在開始之前，先建立一個工程，命令如下：

React-native init NativeView

第一步. 建立ViewManager的子類MyTextViewManager

第二步.實現方法createViewInstance

第三步. 透過@ReactProp（或@ReactPropGroup）註解來匯出屬性的設定方法

上面三步中MyTextViewManager的整個程式碼如下：

public class MyTextViewManager extends SimpleViewManager

@Override

public String getName() {

return "MyTextView";

}

@Override

protected TextView createViewInstance(ThemedReactContext reactContext) {

TextView textView = new TextView(reactContext);

return textView;

}

@ReactProp(name = "text")

public void setText(TextView view, String text) {

view.setText(text);

}

@ReactProp(name = "textSize")

public void setTextSize(TextView view, float fontSize) {

view.setTextSize(fontSize);

}

@ReactProp(name = "textColor", defaultInt = Color.BLACK)

public void setTextColor(TextView view, int textColor) {

view.setTextColor(textColor);

}

@ReactProp(name = "isAlpha", defaultBoolean = false) public void setTextAlpha(TextView view, boolean isAlpha) {

if (isAlpha) {

view.setAlpha(0.5f); }

}}

第四步：註冊MyTextViewManager。

建立類MyReactPackage，實現ReactPackage的方法createViewManager，在該方法中註冊上面的元件MyTextViewManager。實現ReactPackage時，需要實現這三個方法，學過匯入原生模組部分時我們應該很熟悉了。封裝的原生模組放在createNativeModules裡，封裝的原生UI元件放在createViewManagers裡。需要注意的是剩下的最後一個方法createJSModules裡預設是返回null，要改成返回空集合，否則編譯時會報錯。

程式碼如下：

public class MyReactPackage implements ReactPackage {

@Override

public List

return Collections.emptyList();

}

@Override

public List

return Collections.emptyList();

}

@Override

public List

return Arrays.

new MyTextViewManager()

);

}

}

MyReactPackage還需要在MainApplication.java檔案的getPackages方法中提供。這個檔案位於你的react-native應用資料夾的android目錄中。具體路徑是: android/app/src/main/java/com/your-app-name/MainApplication.java.

@Override

protected List

return Arrays.

new MainReactPackage(),

new MyReactPackage()

);

}

第五步：實現對應的JS模組。

最後一步就是建立JavaScript模組並且定義Java和JavaScript之間的介面層。大部分過程都由React底層的Java和JavaScript程式碼來完成，你所需要做的就是透過propTypes來描述屬性的型別。

新建一個MyTextView.js檔案。程式碼如下：

import { PropTypes } from "react";

import {requireNativeComponent,View} from"react-native";

var myTextView ={

name:"MyTextView",

propTypes:{

text:PropTypes.string,

textSize:PropTypes.number,

textColor:PropTypes.number,

isAlpha:PropTypes.bool,

...View.propTypes // 包含預設的View的屬性

}

}

module.exports =requireNativeComponent("MyTextView",myTextView);

最後：然後你就可以在js程式碼中引用剛才的元件了，