如何創(chuàng)建一個android的react-native組件(一)

剛剛接觸react-native不到一月晋被,從一開始照著React Native上文檔的例子熟悉每一個控件的使用羡洛,到頁面跳轉(zhuǎn)藕漱,跳轉(zhuǎn)到android原生Activity肋联,再到自己實現(xiàn)一些簡單的原生的android react-native組件,這是我上傳到npm的兩個組件(react-native-gotoactivity-android 和react-native-segmented-android)韧涨,可以使用下面的命令下載

$ npm install react-native-segmented-android --save
$ npm install react-native-gotoactivity-android --save

先說一下實現(xiàn)原理氓奈,如果是實現(xiàn)類似與Android的Toast與Dialog等一般繼承ReactContextBaseJavaModule來實現(xiàn)鼎天,如果是ViewGroup類型(有子View)的暑竟,例如ScrollView等則繼承ViewGroupManager,如果是View類型(無子View)例如Text罗岖,Image等則繼承BaseViewManager 或者SimpleViewManager等桑包。

我們以ToastAndroid為例子纺非,來講解如何創(chuàng)建原生android react-native組件烧颖,其實facebook官方團(tuán)隊已經(jīng)實現(xiàn)了,這個比較簡單拆火,容易理解们镜。其實我主要就是說明實現(xiàn)的步驟;如有錯誤套硼,請大家多多反饋邪意。希望與大家共同學(xué)習(xí)進(jìn)步反砌。

開始

Step 1 - 新建react-native工程 ReactNativeToastAndroid

$ react-native init ReactNativeToastAndroid

Step 2 - 將新建的工程導(dǎo)入android studio然后新建空library(以react-native-toast-android為library的名稱)之所以要新建一個library而不在ReactNativeToastAndroid工程中寫呢策菜,主要是為了方便上傳到npm及github上方便其他開發(fā)者使用酒贬,一般以react-native-xxx-android命名方便識別這是react-native組件锭吨。

Step 3 - 新建空library(以react-native-toast-android為library的名稱)
在library目錄下的build.gradle中添加react-native的依賴

// file: android/react-native-toast-android/build.gradle
...

dependencies {
    ...
    compile 'com.facebook.react:react-native:0.16.+' 
}

Step 4 - 繼承ReactContextBaseJavaModule 零如,大家可以很明顯的發(fā)現(xiàn)show()方法上多了一個‘@ReactMethod’考蕾,加上了‘@ReactMethod'的方法可以被js調(diào)用。

public class AndroidToastModule extends ReactContextBaseJavaModule {

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public AndroidToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

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

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = MapBuilder.newHashMap();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

Step 5 - 繼承ReactPackage,注意createNativeModules()返回的是加入了 AndroidToastModule 的集合塞帐,createJSModules()與createViewManagers()返回的都是空集合,如果Step 4 步繼承的是BaseViewManager或其子類矛紫,那么createViewManagers()中返回的就是加入了BaseViewManager的集合颊咬,其他的就是空集合,一般情況createJSModules()的返回值都是空集合喳篇。

public class AndroidToastPackage implements ReactPackage {

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        return Arrays.<NativeModule>asList(new AndroidToastModule(reactContext));
    }

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

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

Step 6 - 新建ToastForAndroid.js麸澜,文件位置
‘ android/react-native-toast-android/ToastForAndroid.js ’代碼如下炊邦,然后在 ‘a(chǎn)ndroid/react-native-toast-android/’下運行如下命令生成package.json文件

$ npm init      //生成package.json文件
'use strict';

var RCTToastAndroid = require('NativeModules').ToastForAndroid;


var ToastForAndroid = {

  SHORT: RCTToastAndroid.SHORT,
  LONG: RCTToastAndroid.LONG,

  show: function (
    message: string,
    duration: number
  ): void {
    RCTToastAndroid.show(message, duration);
  },

};

module.exports = ToastForAndroid;

Step 7 - 復(fù)制ToastForAndroid.js 文件到‘/ReactNativeToastAndroid/ ’ 目錄下馁害,如下是index.android.js代碼,然后運行測試

'use strict';
 
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Dimensions,
  TouchableHighlight,
  View,
} = React;
 
// var ToastForAndroid = require('react-native-toast-android');
var ToastForAndroid = require('./ToastForAndroid');
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;
 
var ReactNativeSegmentedExample = React.createClass({
   _onPressButton:function(){
          ToastForAndroid.show('點擊了凹蜈!', ToastAndroid.SHORT)
      }); 
   },
  render: function() {
    return (
      renderButton: function() {
        return (
          <TouchableHighlight onPress={this._onPressButton}>
            <Text style={{width:deviceWidth,height:50}}>click goto activity</Text>
          </TouchableHighlight>
        );
      },
    );
  }
});
...

Step 9 - 測試成功仰坦,在目錄‘ /android/react-native-toast-android/ ’下運行命令:

$ npm adduser   //增加npm用戶
$ npm publish   //上傳react-naive-toast-android到npm上

Step 10 - 其他開發(fā)者使用你上傳到npm上的組件方法(github上的模板)

Example

'use strict';
 
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  Dimensions,
  TouchableHighlight,
  View,
} = React;
 
var ToastForAndroid = require('react-native-toast-android');
// var ToastForAndroid = require('./ToastForAndroid');
var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;
 
var ReactNativeSegmentedExample = React.createClass({
   _onPressButton:function(){
          ToastForAndroid.show('點擊了!', ToastAndroid.SHORT)
      }); 
   },
  render: function() {
    return (
      renderButton: function() {
        return (
          <TouchableHighlight onPress={this._onPressButton}>
            <Text style={{width:deviceWidth,height:50}}>click goto activity</Text>
          </TouchableHighlight>
        );
      },
    );
  }
});
...

Install

Step 1 - Install the npm package

$ npm install react-native-toast-android --save

Step 2 - Update Gradle Settings

// file: android/settings.gradle
...

include ':react-native-toast-android', ':app'
project(':react-native-toast-android').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-toast-android')

Step 3 - Update app Gradle Build

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-toast-android')
}

Step 4 - Register React Package

...
import com.higo.zhangyp.toast.AndroidForToastPackage; // <-- import

public class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new AndroidForToastPackage()) // <-- Register package here
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
        setContentView(mReactRootView);
    }
...

2.如何自定義react-native的android組件(二)
3.react-native-0.16.1 自定義Android組件部分的源碼初探

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末传泊,一起剝皮案震驚了整個濱河市鼠渺,隨后出現(xiàn)的幾起案子鸭巴,更是在濱河造成了極大的恐慌,老刑警劉巖拦盹,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鹃祖,死亡現(xiàn)場離奇詭異,居然都是意外死亡普舆,警方通過查閱死者的電腦和手機(jī)恬口,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來沼侣,“玉大人祖能,你說我怎么就攤上這事《曷澹” “怎么了钞螟?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我仙蛉,道長,這世上最難降的妖魔是什么哀墓? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任吠各,我火速辦了婚禮,結(jié)果婚禮上纵散,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好把兔,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布聘惦。 她就那樣靜靜地躺著,像睡著了一般禀酱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上鳍置,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天偷崩,我揣著相機(jī)與錄音衫冻,去河邊找鬼到推。 笑死,一個胖子當(dāng)著我的面吹牛捣卤,可吹牛的內(nèi)容都是我干的鸠项。 我是一名探鬼主播哥捕,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼讲坎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了府瞄?” 一聲冷哼從身側(cè)響起丰榴,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后觉吭,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡嗓蘑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巷燥。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布漓摩,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望工育。 院中可真熱鬧怔接,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽逆皮。三九已至电谣,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間抹蚀,已是汗流浹背环壤。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工攒读, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親风科。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容