剛剛接觸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組件部分的源碼初探