Question

如何创建一个android的react-native组件

Answer 1

Step 1 - 新建react-native工程 ReactNativeToastAndroid
$ react-native init ReactNativeToastAndroid1
Step 2 - 将新建的工程导入android studio然后新建空library（以react-native-toast-android为library的名称）之所以要新建一个library而不在ReactNativeToastAndroid工程中写呢，主要是为了方便上传到npm及github上方便其他开发者使用，一般以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.+'
}1234567
Step 4 - 继承ReactContextBaseJavaModule ，大家可以很明显的发现show（）方法上多了一个‘@ReactMethod’，加上了‘@ReactMethod’的方法可以被js调用。
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（）；
}
}123456789101112131415161718192021222324252627
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（）；
}
}1234567891011121314151617
Step 6 - 新建ToastForAndroid.js，文件位置
' android/react-native-toast-android/ToastForAndroid.js ‘代码如下，然后在 'android/react-native-toast-android/’下运行如下命令生成package.json文件
$ npm init //生成package.json文件1
'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;1234567891011121314151617181920
Step 7 - 复制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>
）；
},
）；
}
}）；
…1234567891011121314151617181920212223242526272829303132333435
Step 9 - 测试成功，在目录' /android/react-native-toast-android/ ’下运行命令：
$ npm adduser //增加npm用户
$ npm publish //上传react-naive-toast-android到npm上12
Step 10 - 其他开发者使用你上传到npm上的组件方法（github上的模板）