菜单

制作npm插件vue-toast-m实例演练

2019年5月3日 - XML

3、npm 插件制作

率先片段轻松制作iOS 和 Android 原生模块 和 UI组件

强烈提议我们先到昂CoraN华语网 上边写的很清晰怎么样制作UI插件和原生模块
http://reactnative.cn/docs/0.42/getting-started.html
</br>
PS:本文不会详细介绍怎么样成立二个原生模块和原生UI组件因为奇骏N普通话网已经有了;p您也足以参考github上的源码,下文只是对原生如何创造原生模块(一)和原生UI组件(2)简叙,相信您平素看源码对您有更加大的救助

难题: 何为原生模块(壹) 何为原生UI插件(2)?
答:
原生模块(一):简来讲之原生模块正是提供JS调用原生方法的路线,就像你在原生代码上写了2个方法,须求从JS调用这几个点子,那时候你就能够运用将艺术封装为原生模块
原生UI组件(2):则是React提供了壹种自定义封装的路子
在实质上选拔中封装原生UI组件(二)经常会构成原生模块(1)使用
本react-native-counting插件就是一个例证

肆、npm插件发表

npm官网: https://www.npmjs.com/ 注册自身的用户,记住注册时的用户名密码。接下来就能够实践命令。

npm adduser   // 添加用户:输入用户名密码和邮箱

npm whoami  // 验证当前用户是谁,验证是不是之前添加的用户

npm publish  // 发布

package.json中name是插件的名字,首先要在npm搜索一下是否有同名字的插件,要是有是无法以那一个名字公布的;version是插件版本,如若更换了体系,供给修改一下版本号再张开npm publish发布。

图片 1

因为插件名字在npm已经有了,所以把name改为vue-toast-demo-cc再发布。
发表成功:https://www.npmjs.com/package/vue-toast-demo-cc

图片 2

 

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];
}

三.五  打包后测试

src/index.html修改使用

cnpm install vue --save  // 安装vue

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="../dist/vue-toast-demo.js"></script>

<div id="app" class="text-center">
    <h2>vue-toast for mibile</h2>
    <div class="form-group row">
        <a class="btn btn-primary" href="javascript:;" @click="toast">默认toast</a>
    </div>
    <div class="form-group row">
        <a class="btn btn-info" href="javascript:;" @click="toast2">5秒后关闭toast</a>
    </div>
    <div class="form-group row">
        <a class="btn btn-success" href="javascript:;" @click="toast3">关闭toast后,执行回调</a>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        methods:{
            toast:function(){
                this.$toast.show("当前点击了标签");
            },
            toast2:function(){
                this.$toast.show("当前点击了标签",{
                    duration:5000
                });
            },
            toast3:function(){
                this.$toast.show("当前点击了标签",function(){
                    alert("这里是回掉函数")
                });
            }
        }
    })
</script>

实践webpack打包命令后运转index.html

图片 3

Android 原生组件制作 以本德姆o(counting)为例

想想:制作三个会动的数字效果必要调用Android方法以推行动画所以需求用到原生模块(一)
且那一个视图也必须是自定义UI组件的(二)

成立npm插件vue-toast-m实例演练(音讯弹窗)

简轻便单介绍一下以此原生插件功能:你能够使用这几个插件展现会滚动的金额数字
PS:纵然福特ExplorerN
固然效果代码简单,但对于第二学习制作插件的同窗来讲照旧有救助的:p

三.二  编写静态页面

vue-toast-demo/src文件夹下建构index.html静态页面

图片 4

为了便于阅读 本小说分为 3局地
1

一、使用npm插件

import VueToast  from 'vue-toast-demo-cc'

Vue.use(VueToast)


this.$toast.show("hello,toast")
//or
this.$toast.show("hello,toast",{
  duration:3000
})
// or
this.$toast.show("hello,toast",function(){
    //to-do  
})

三.3  插件成效落成

vue-toast-demo/src/lib/vue-toast.vue组件页面,将静态文件搬到vue文件中

<template>
    <section class="toast-container">
        <div class="toast" v-bind:class="[visible?'fade-in':'fade-out']">
            {{message}}
        </div>
    </section>
</template>

<script>
export default{
    data(){
        return {
            message:'',
            visible:false
        }
    }
}
</script>

<style scoped lang="scss">
    ......
</style>

src/lib/index.js入口文件

// 入口文件
import ToastComponent from './vue-toast.vue'

let Toast = {}
Toast.install = function(Vue,options){   // 必须定义一个install方法,才可以在使用时Vue.use()
    // 默认配置
    var opt = {
        duration:3000
    }

    // 用户配置覆盖默认配置
    for(var key in options){
        opt[key] = options[key];
    }

    // 在vue的原型上面拓展一个$toast函数
    Vue.prototype.$toast = function(message,option){
        let callback = '';
        // 配置覆盖,设置局部配置
        if(typeof option == 'object'){
            for(var key in option){
                opt[key] = option[key];
            }
        }else if(typeof option == 'function'){
            callback = option;
        }

        // 用Vue.extend()继承ToastComponent组件,构成一个ToastController实例
        const ToastController = Vue.extend(ToastComponent);

        //new ToastController()相当于一个新的Vue对象
        //这个对象挂载到空的div里面,类似于vue组件中 var vm = new Vue({ data:{} ... }).$mount("#app")功能
        var instance = new ToastController().$mount(document.createElement("div"));

        instance.message = message;
        instance.visible = true;

        document.body.appendChild(instance.$el);

        setTimeout(()=>{
            instance.visible = false;
            setTimeout(()=>{
                document.body.removeChild(instance.$el);
                callback && callback();
            },500)
        }, opt.duration)
    };

    // Vue.prototype.$toast['show'] = function(message,option){
    //      Vue.prototype.$toast(message,option);
    // }
    // Vue.prototype.$toast['success'] = function(message,option){
    //      Vue.prototype.$toast(message,option);
    // }
    // Vue.prototype.$toast['info'] = function(message,option){
    //      Vue.prototype.$toast(message,option);
    // }
    // Vue.prototype.$toast['error'] = function(message,option){
    //      Vue.prototype.$toast(message,option);
    // }

    // 简化上面代码
    ['show','success','info','error'].forEach(function(type){
        Vue.prototype.$toast[type] = function(message,option){
            return Vue.prototype.$toast(message,option);
        }
    });

}

// if(window.Vue){
//     Vue.use(Toast);
// }

if(typeof window !== 'undefined' && window.Vue){
    window.Vue.use(Toast);
}

// 导出
export default Toast;

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中文)即可

三.四  webpack打包作用达成

(1) webpack准备

cnpm install webpack --save // 安装webpack

vue

cnpm install --save vue-template-compiler vue-loader

支持es6  http://babeljs.io/  
安装 babel-preset-env后要树立 .babelrc文本写配置

cnpm install --save babel-core babel-loader babel-preset-env // babel-core是es6核心的文件,一定要有

(2) 新建webpack.config.js配置文件

var path = require('path');

module.exports = {
    entry: './src/lib/index.js',  // 入口
    output: {
        // path:'./dist',   // 指定输出路径
        path:path.join(__dirname,'./dist'),   // 必须是绝对路径
        filename: 'vue-toast-demo.js'   // 插件的名字
    },

    module:{  // module模块;解析一些webpack不认识的文件
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },
    // js文件的合并,HTML的生成,插件等等
    plugins:[
        .....
    ]
};

(三) 打包命令

webpack  // 如果文件不叫webpack.config.js 可以使用--config参数传入路径 例:webpack --config ./webpackConfig/dev.config.js

假定成功会生成dist/vue-toast-demo.js文件,假设报错依据报错提示安装缺少的插件等

图片 5

比方说上图正是紧缺 vue-template-compiler插件,安装一下就行

图片 6

上海教室是贫乏管理css样式的,vue-toast.vue是用sass管理体制
安装sass

cnpm install node-sass sass-loader --save  // sass-loader依赖于node-sass
cnpm install css-loader style-loader --save

(4)webpack.config.js详细安顿

安装了各插件后还需布署

var path = require('path');

module.exports = {
    entry: './src/lib/index.js',  // 入口
    output: {
        // path:'./dist',   // 指定输出路径
        path:path.join(__dirname,'./dist'),   // 必须是绝对路径
        filename: 'vue-toast-demo.js',   // 插件的名字
        libraryTarget:'umd',   // 输出的文件格式,umd可适用各种规范(cmd/amd/commonjs...)
        library:'VueToastDemo'  // 输出的文件库的名字
    },

    module:{  // module模块;解析一些webpack不认识的文件
        // 放加载器
        rules:[
            {
                test:/\.vue$/,   // 处理vue文件
                loader:'vue-loader',
                exclude:/node_modules/,
                options:{    // 解析vue文件中一些其他的语法
                    loaders:{
                        scss:'style-loader!css-loader!sass-loader'  // loader解析从右到左,先用sass-loader处理成css,再用css-loader进行处理,再用style-loader插入到HTML中
                    }
                }
            },
            {
                test:/\.js$/,   // 处理js文件
                loader:'babel-loader',
                include:path.join(__dirname,'src'),  // 指定目录解析
                exclude:/node_modules/    // 过滤掉node_modules文件夹
            }
        ]
    },

    // js文件的合并,HTML的生成,插件等等
    plugins:[
        ......
    ]
};
  1. 制作多少个React-Native原生UI组件(Android and
    iOS)
  2. 卷入1个原生组件
  3. [将原生组件上传至npm

二、项目组织

npm插件原地方:https://www.npmjs.com/package/vue-toast-m

webpack官网: https://webpack.js.org/

项目github地址: https://github.com/ccyinghua/vue-toast-demo

|-- src
    |-- lib
        |-- index.js  --// 入口文件
        |-- vue-toast.vue
    |-- index.html  -- // 静态文件
|-- .babelrc
|-- package.json
|-- webpack.config.js --// 配置文件

最后效果
npm:https://www.npmjs.com/package/react-native-counting
github:https://github.com/zhaomingbo/react-native-counting
(⭐️star的人最帅了)
gif图片:

3.1  新建vue-toast-demo文件夹

cd vue-toast-demo   // 进入文件夹
npm init  // 初始化npm,生成package.json

输入npm init之后生成package.json

图片 7

package.json

{
  "name": "vue-toast-demo",
  "version": "1.0.0",   // 版本
  "description": "a toast plugin for mobile",
  "main": "index.js",   // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {   // github
    "type": "git",
    "url": "git+https://github.com/ccyinghua/vue-toast-demo.git"
  },
  "keywords": [    // 关键词
    "toast",
    "vue-toast"
  ],
  "author": "ccyinghua",  // 作者
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/ccyinghua/vue-toast-demo/issues"
  },
  "homepage": "https://github.com/ccyinghua/vue-toast-demo#readme"
}

一.制作1个原生模块(壹)

iOS 原生组件制作 以本德姆o(counting)为例

同安卓1模同样制作三个会动的数字效果需求调用OC方法以施行动画所以供给用到原生模块(1)
且这些视图也务必是自定义UI组件的(二)

下边小说以宝马X3N简写ReactNative 以JS简写JavaScript

上面是要让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();
    }

很粗大略吗正是1个ValueAnimatord动画而已 numberTimer方法必要传入贰个参数
起始的值,停止的值,动画时间(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);
        }

图片 8

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图