ReactNative制作原生插件Android,iOS 并上传至npm(1)

为了方便阅读 本文章分为 3部分
1

1. 制作一个React-Native原生UI组件(Android and iOS)
2. 打包一个原生组件
3. [将原生组件上传至npm

最终效果
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
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中文即可