React Native使用原生UI元件

2021-07-28 12:39:34 字數 2318 閱讀 6453

其實,如果android接入rn已經搞好了,這個就不難弄了,都是類似的,下面先大致介紹一下如何使用原生ui元件的,**如下:

public

class

nativepaintviewmanager

extends

******viewmanager

@override

protected mypaintview createviewinstance(themedreactcontext reactcontext)

@reactprop(name = "color")

public

void setcolor(mypaintview paintview, string color)

@reactprop(name = "raduis")

public

void setraduis(mypaintview paintview, integer raduis)

}

說明一下,這裡的******viewmanager指定的型別為mypaintview,這個mypaintview就是android自定義的乙個view,我簡單的畫了乙個圓,提供的屬性有 color,raduis 分別表示圓的顏色以及半徑大小,注意需要用@reactprop註解。接下來介紹一下mypaintview

public

class

mypaintview

extends

view

public

mypaintview(context context, attributeset attrs)

public

mypaintview(context context, attributeset attrs, int defstyleattr)

@override

protected

void

onsizechanged(int w, int h, int oldw, int oldh)

@override

protected

void

ondraw(canvas canvas)

/*** 設定顏色

*/public

void

setcolor(string color)

/*** 設定圓的 半徑

*/public

void

setraduis(integer raduis)

}

這裡 我就簡單的畫了乙個圓,對外提供了設定顏色跟設定半徑兩個方法,當rn引用這個元件的時候,就可以將這兩個方法轉化成對應的屬性了,在js中使用就很簡單了

public

class

myreactpackage

implements

reactpackage

@override

public list> createjsmodules()

@override

//返回值需要修改

// return collections.emptylist();

// 因為自定義的原生view,需要返回native的viewmanager

return arrays.aslist(new nativepaintviewmanager());}}

import  from 'react';

import from 'react-native';

var iface = ,

};module.exports = requirenativecomponent('rctmypaintview', iface);

注意在這裡需要指定color、raduis的屬性,分別用proptypes.string跟proptypes.number表示,這樣的話,在別的地方就可以引用這個元件了

//匯入元件

import paintview from

'./nativepaintview';

// 使用

"#ff5984"}

raduis=

/>

React Native 原生 APP 更新

比較遠端版本和當前版本的區別 可以使用庫,也可以自己寫乙個比較方案 比較兩版本號 param currentversion return boolean true 需要更新 false 不需要 compareversion currentversion string boolean this.rem...

ReactNative整合到原生專案

reactnative整合到原生專案 1 在工程裡建立乙個reactcomponent資料夾,用來存放reactnative相關的檔案 2 reactcomponent資料夾裡,存放以下檔案 3 其中package.json檔案是關於reactnative的配置資訊,最好自己init乙個專案然後將專...

原生iOS專案匯入ReactNative,各種問題

xcode select print path library developer commandlinetools xcodebuild showsdks xcode select error tool xcodebuild requires xcode,but active developer ...