为了方便阅读 本文章分为 3部分
1
最终效果
npm:https://www.npmjs.com/package/react-native-counting
github:https://github.com/zhaomingbo/react-native-counting (⭐️star的人最帅了)
gif图片:
下面文章以RN简写ReactNative 以JS简写JavaScript
简单介绍一下这个原生插件作用：你可以使用这个插件显示会滚动的金额数字 PS:虽然RN 虽然效果代码简单，但对于初次学习制作插件的同学来说还是有帮助的:p
第一部分简单制作iOS 和 Android 原生模块 和 UI组件
强烈建议大家先到RN中文网 上面写的很清晰如何制作UI插件和原生模块
http://reactnative.cn/docs/0.42/getting-started.html </br> PS:本文不会详细介绍如何制作一个原生模块和原生UI组件因为RN中文网已经有了;p您也可以参考github上的源码，下文只是对原生如何制作原生模块(1)和原生UI组件(2)简叙，相信您直接看源码对你有更大的帮助
问题: 何为原生模块(1) 何为原生UI插件(2)?
答：
原生模块(1):简单的说原生模块就是提供JS调用原生方法的途径，就像你在原生代码上写了一个方法，需要从JS调用这个方法，这时候你就可以使用将方法封装为原生模块
原生UI组件(2):则是React提供了一种自定义封装的途径
在实际应用中封装原生UI组件(2)通常会结合原生模块(1)使用 本react-native-counting插件就是一个例子
Android 原生组件制作 以本Demo(counting)为例
思考:制作一个会动的数字效果需要调用Android方法以执行动画所以需要用到原生模块(1) 且这个视图也必须是自定义UI组件的(2)
1.制作一个原生模块(1)
下面是要让JS 调用原生代码执行动画的方法
@ReactMethod
public void countingStart(float start,float end,double dur){
final NumTextView view = this;
final DecimalFormat df = new DecimalFormat("###.00");
ValueAnimator valueAnimator = ValueAnimator.ofFloat(start,end);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(final ValueAnimator valueAnimator) {
view.post(new Runnable() {
@Override
public void run() {
view.setText(df.format(valueAnimator.getAnimatedValue()) + "");
}
});
}
});
valueAnimator.setInterpolator(this.seTime());
valueAnimator.setDuration((long) dur);
valueAnimator.start();
}
很简单吧就是一个ValueAnimatord动画而已 numberTimer方法需要传入3个参数 开始的值，结束的值，动画时间（ms）
// js
// 点击按钮事件调用java方法
import { NativeModules } from 'react-native';
_onPressButton(){
NativeModules.counting.countingStart(0,5200.10,3000);
this.setState({
finshded:false
})
}
2.原生UI组件(2)
static NumTextView tx;
@Override
protected NumTextView createViewInstance(ThemedReactContext reactContext) {
tx = new NumTextView(reactContext);
return tx;
}
JS调Java方法就这样完成了,
下面我们考虑这个TextView需要用户来设置文字颜色和其他属性（这里以选择文字颜色setTextColor为例）
//设置文字颜色
@ReactProp(name="textColor",defaultInt = Color.BLACK)
public void setTextColor(NumTextView view,int textColor){
view.setTextColor(textColor);
}
iOS 原生组件制作 以本Demo(counting)为例
同安卓一样制作一个会动的数字效果需要调用OC方法以执行动画所以需要用到原生模块(1) 且这个视图也必须是自定义UI组件的(2)
1.制作一个原生模块(1)
//js调用原生
RCT_EXPORT_METHOD(startValue:(CGFloat)startValue endValue:(CGFloat)endValue duration:(NSTimeInterval)duration)
{
__weak CountingManager *weakSelf = self;
weakSelf.count.countLabel.completionBlock = ^(){
weakSelf.count.onFinish(@{});
}; //动画执行完调用此方法
[_count.countLabel countFrom:startValue to:endValue withDuration:duration];
}
2.原生UI组件(2)
-(UIView *)view{
Counting *count = [Counting new];
_count = count;
return count;
}
** 考虑到这个自定义组件需要用户设置文字颜色和其他属性 下面以设置文字颜色为例 **
RCT_EXPORT_VIEW_PROPERTY(textColor, UIColor)
我们希望用户通过一个属性修改文字颜色
可以修改set方法设置view上的Lable的颜色
- (void)setTextColor:(UIColor *)textColor{
_countLabel.textColor = textColor;
}
本部分简单介绍（原生模块和UI组件）就此结束,如果不懂的制作的看下RN中文即可
