// 抽象模板--饮料类
class Beverage {

    init() {
        this.boilWater()
        this.brew()
        this.pourInCup()
        if (this.customerWantsCondiments()) { // 如果挂钩返回true，则需要调料
            this.addCondiments()
        }
    }

    /**
     * 烧水
     */
    boilWater() {
        console.log('把水煮沸')
    }

    /**
     * 用沸水冲泡
     */
    brew() {
        throw new Error('子类必须重写brew方法')
    }

    /**
     * 倒进杯中
     */
    pourInCup() {
        throw new Error('子类必须重写pourInCup方法')
    }

    /**
     * 添加辅料
     */
    addCondiments() {
        throw new Error('子类必须重写addCondiments方法')
    }

    /**
     * 是否需要添加辅料钩子函数
     */
    customerWantsCondiments() {
        return true //默认为true 需要
    }
}

class Tea extends Beverage{
    brew() {
        console.log('用沸水冲泡茶')
    }

    pourInCup() {
        console.log('将茶倒入杯中')
    }

    addCondiments() {
        console.log('添加柠檬')
    }

    customerWantsCondiments() {
        return false // 不要辅料
    }
}

class Coffee extends Beverage{
    brew() {
        console.log('用沸水冲咖啡')
    }

    pourInCup() {
        console.log('将咖啡倒入杯中')
    }

    addCondiments() {
        console.log('添加糖和牛奶')
    }

    customerWantsCondiments() {
        return true // 添加辅料
    }
}

const coffee = new Coffee()
coffee.init()

// 文件夹类
class Folder {
    constructor(name) {
        this.name = name
        this.parent = null
        this.components = []
    }
    /**
     * 添加方法
     */
    add(component) {
        component.parent = this
        this.components.push(component)
    }

    /**
     * 扫描方法
     */
    scan() {
        console.log('开始扫描文件夹' + this.name)
        this.components.forEach(component => {
            component.scan()
        })
    }

    /**
     * 移除方法
     */
    remove() {
        if (!this.parent) return //根节点或者树外的游离节点
        this.parent.components.forEach((component, index) => {
            if (component === this) this.parent.components.split(index, 1)
        })
    }
}

// 文件类
class File {
    constructor(name) {
        this.name = name
        this.parent = null
    }
    /**
     * 添加方法
     */
    add() {
        throw new Error('不能添加在文件下面');
    }

    /**
     * 扫描方法
     */
    scan() {
        console.log('开始扫描文件' + this.name)
    }

    /**
     * 移除方法
     */
    remove() {
        if (!this.parent) return //根节点或者树外的游离节点
        this.parent.components.forEach((component, index) => {
            if (component === this) this.parent.components.split(index, 1)
        })
    }
}

// 创建文件夹
const myFolder = new Folder('我的学习资料')
const javaFolder = new Folder('Java')
const jsFolder = new Folder('JavaScript')
const designPatternFolder = new Folder('设计模式')
const javaWebFolder = new Folder('JavaWeb')
const reactFolder = new Folder('React')
const nodeFolder = new Folder('Node')

// 创建文件
const javaFile = new File('Java从入门到精通.pdf')
const springFile = new File('Spring从入门到精通.pdf')
const reactFile = new File('React学习笔记.md')
const jsFile = new File('JavaScript设计模式与开发实践.pdf')

// 向文件夹中添加文件夹以及文件
myFolder.add(javaFolder)
myFolder.add(jsFolder)
myFolder.add(designPatternFolder)

javaFolder.add(javaFile)
javaFolder.add(javaWebFolder)
javaWebFolder.add(springFile)

jsFolder.add(reactFile)

designPatternFolder.add(jsFile)

myFolder.scan()

// 移除
jsFolder.remove()
myFolder.scan()

// 定义接受者类
class Receive {
    constructor(name) {
        this.name = name
    }
    /**
     * 保存方法
     */
    save() {
        console.log(`我是${this.name}的保存操作`)
    }

    /**
     * 删除方法
     */
    delete() {
        console.log(`我是${this.name}的删除操作`)
    }
}

/**
 * 定义保存命令
 */
class SaveCommand {
    constructor(receiver) {
        this.receiver = receiver
    }

    /**
     * 默认的命令执行方法
     */
    execute() {
        this.receiver.save()
    }
}

/**
 * 定义删除命令
 */
class DeleteCommand {
    constructor(receiver) {
        this.receiver = receiver
    }

    /**
     * 默认的命令执行方法
     */
    execute() {
        this.receiver.delete()
    }
}

// 创建接受者对象
const receiver = new Receive('哈哈哈')
// 创建保存命令对象
const saveCommand = new SaveCommand(receiver)
// 创建删除命令对象
const deleteCommand = new SaveCommand(receiver)
// 执行保存命令
saveCommand.execute() //输出：我是哈哈哈的保存操作
// 执行删除命令
deleteCommand.execute() //输出：我是哈哈哈的删除操作

// 人员信息类
class Person {
    constructor(name, age, gender) {
        this.name = name
        this.age = age
        this.gender = gender
    }
    /**
     * 保存方法
     */
    save() {
        // 具体保存方法省略
        console.log(`${this.name}的信息保存成功`)
    }
}

// 人员联系人信息类
class PersonContact {
    constructor(person) {
        this.person = person
    }
    /**
     * 保存方法
     */
    save() {
        // 具体保存方法省略
        console.log(`${this.person.name}的联系人信息保存成功`)
    }
}

/**
 * 定义保存命令
 */
class SaveCommand {
    constructor(receiver) {
        this.receiver = receiver
    }

    /**
     * 默认的命令执行方法
     */
    execute() {
        this.receiver.save()
    }
}

/**
 * 定义宏命令
 */
class MacroCommand {
    constructor() {
        this.commandsList = []
    }

    addCommand(command) {
        this.commandsList.push(command)
    }

    execute() {
        this.commandsList.forEach(command => {
            command.execute()
        })
    }
}

// 创建人员信息对象
const person = new Person('张三', 21, '男')
// 创建人员联系人信息对象
const pContact = new PersonContact(person)
// 创建保存命令对象
const saveCommandPerson = new SaveCommand(person)
const saveCommandContact = new SaveCommand(pContact)
// 创建宏命令对象
const macroCommand = new MacroCommand()
macroCommand.addCommand(saveCommandPerson)
macroCommand.addCommand(saveCommandContact)
// 执行宏命令
macroCommand.execute() //输出：张三的信息保存成功 张三的联系人信息保存成功

// 定义发布者基类
class Subject {
    // 构造函数
    constructor() {
        this.observers = []
    }

    /**
     * 添加订阅者
     */
    add(observer) {
        this.observers.push(obj)
    }

    /**
     * 移除订阅者
     */
    remove(observer) {
        this.observers.forEach((item, index) => {
            if (item === observer) this.observers.splice(index, 1);
        })
    }

    /**
     * 通知消息
     * @param {*} msg 
     */
    notify(msg) {
        this.observers.forEach(item => {
            item.receive(this, msg)
        })
    }
}

/**
 * 定义大V类
 */
class BigV extends Subject {
    constructor(name) {
        super()
        this.name = name
    }

    /**
     * 获取姓名
     */
    getName() {
        return this.name
    }

    /**
     * 添加粉丝
     * @param {} fans 
     */
    addFans(fans) {
        this.add(fans)
    }

    /**
     * 向粉丝推送消息
     * @param {*} msg 
     */
    pushMsg(msg) {
        this.notify(msg)
    }
}

/**
 * 定义粉丝类
 */
class Fans {
	constructor(name) {
        this.name = name
    }
   /**
	*接受推送消息方法
	*/
    receive(bigV, msg) {
        console.log(`我是粉丝${this.name}接收到了大V${bigV.getName}推送的消息：${msg}`)
    }
}

let bigV = new BigV('Eason')
let fans1 = new Fans('Jack')
let fans2 = new Fans('Tom')
bigV.addFans(fans1)
bigV.addFans(fans2)
bigV.pushMsg('祝大家新年快乐！')// 输出： 我是粉丝Jack接收到了大VEason推送的消息：祝大家新年快乐！
									  我是粉丝Tom接收到了大VEason推送的消息：祝大家新年快乐！

// 定义内部迭代器
let forEach = (arry, callback) => {
  // 迭代规则
  for(let i = 0; i< arry.length; i++) {
    callback(arry[i], i)
  }
}
// 执行迭代器
forEach([a, b, c, d], (item, index) => {
  console.log(item) // 输出：a b c d
})

// 定义外部迭代器类
class Iterator {
    // 构造函数
    constructor(arry) {
        this.currentIndex = 0;
        this.arry = arry
    }

    // 当前数组下标后移一位，若还有下一位，则返回true 若没有下一位，则范围false
    next() {
        if (this.currentIndex < (this.arry.length - 1)) {
            this.currentIndex++
            return true
        }
        return false
    }

    // 获取当前下标的对象
    getCurrentItem() {
        return this.arry[this.currentIndex]
    }
}

let iterator = new Iterator([1, 2, 3, 4, 5])
while(iterator.next()) {
    console.log(iterator.getCurrentItem()) // 最终输出1 2 3 4 5
}

// 定义终止迭代器
let forEach = (arry, callback) => {
  // 迭代规则
  for(let i = 0; i< arry.length; i++) {
    if (!callback(arry[i], i)) break;
  }
}
// 执行迭代器
forEach([2, 4, 6, 7, 8], (item, index) => {
	console.log(item) // 输出：2 4 6 7
	return item%2 !== 0 // 当item不为偶数时终止
})

// 图片加载函数
  var myImage = (function(){
      var imgNode = document.createElement("img");
      document.body.appendChild(imgNode);
  
      return {
          setSrc: function(src) {
              imgNode.src = src;
          }
     }
 })();
 
 // 引入代理对象
 var proxyImage = (function(){
     var img = new Image;
     img.onload = function(){
         // 图片加载完成，正式加载图片
         myImage.setSrc( this.src );
     };
     return {
         setSrc: function(src){
             // 图片未被载入时，加载一张提示图片
             myImage.setSrc("file://c:/loading.png");
             img.src = src;
         }
     }
 })();
 
 // 调用代理对象加载图片
 proxyImage.setSrc( "http://images/qq.jpg");

var add = function(){
    var sum = 0;
    for(var i = 0, l = arguments.length; i < l; i++){
        sum += arguments[i];
    }
    return sum;
};
var proxyAdd = (function(){
    var cache = {}; //缓存运算结果的缓存对象
    return function(){
        var args = Array.prototype.join.call(arguments);//把参数用逗号组成一个字符串作为“键”
        if(cache.hasOwnProperty(args)){//等价 args in cache
            console.log('使用缓存结果');
            return cache[args];//直接使用缓存对象的“值”
        }
        console.log('计算结果');
        return cache[args] = add.apply(this,arguments);//使用本体函数计算结果并加入缓存
    }
})();
console.log(proxyAdd(1,2,3,4,5));
console.log(proxyAdd(1,2,3,4,5));
console.log(proxyAdd(1,2,3,4,5));

// 输出结果
计算结果
15
使用缓存结果
15
使用缓存结果
15

const target = {}, handler = {}
const proxy = new Proxy(target, handler)

let user = {
	username: 'zhangsan',
	password: '123456',
}

var userProxy = new Proxy(user,{
	get: function(target, property, receiver){
		console.log(`你访问了user的${property}属性`)
		return target[prop]
	}
});
console.log(userProxy.username)
// 你访问了user的username属性 
// zhangsan

class MyImage {
    constructor(document) {
        this.imgNode = document.createElement('img')
      	document.body.appendChild(imgNode)
    }
    
    setSrc(src) {
        imgNode.src = src
    }
}

let myImg = new MyImage(document)

let myImageProxy = new Proxy(myImg.setSrc, {
    apply(target, ctx, arguments) {
        var img = new Image
        img.onload = function(){
            // 图片加载完成，正式加载图片
            Reflect.apply(target, ctx, arguments)
        }
        // 图片未被载入时，加载一张提示图片
        Reflect.apply(target, ctx, ['file://c:/loading.png'])
        img.src = arguments[0]
    }
})

// 调用
myImageProxy('http://images/qq.jpg')

class Add {
    constructor() {
        var sum = 0;
        for(var i = 0, l = arguments.length; i < l; i++){
            sum += arguments[i]
        }
        return {value: sum}
    }
}

let AddProxy = new Proxy(Add, {
    construct(target, arguments, newTarget) { // newTarget最初的构造函数
    	let cache = target.cache // 从Add类中取出静态属性cache(缓存运算结果的缓存对象)
        var args = Array.prototype.join.call(arguments);//把参数用逗号组成一个字符串作为“键”
        if(cache.hasOwnProperty(args)){//等价 args in cache
            console.log('使用缓存结果');
            return cache[args];//直接使用缓存对象的“值”
        }
        console.log('计算结果');
        return cache[args] = Reflect.construct(target, arguments);//使用本体函数计算结果并加入缓存
    }
})

// 表单验证策略类
class Strategy {
    /**
     * 是否为空校验
     * @param {*} value 校验对象
     * @param {*} errorMsg 错误信息
     */
    isNonEmpty (value, errorMsg) {
        if (value === '') return errorMsg
    }
    
    /**
     * 最小长度校验
     * @param {*} value 校验对象
     * @param {*} length 最小长度
     * @param {*} errorMsg 错误信息
     */
    minLength (value, length, errorMsg) { 
        if (value.length < length) return errorMsg
    }

    /**
     * 手机号码格式校验
     * @param {*} value 校验对象
     * @param {*} errorMsg 错误信息
     */
    isMobile (value, errorMsg){ // 手机号码格式
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) return errorMsg
    }
}

// 表单验证环境类
class Validator {
    constructor () {
        this.cache = [] // 保存校验规则
        this.strategies = new Strategy() //维护一个Strategy对象的引用
    }

    /**
     * 添加校验规则
     * @param {*} value 校验对象
     * @param {*} rule 以冒号隔开的字符串。冒号前面的代表客户挑选的strategy对象，冒号后面表示在校验过						 程中所必需的一些参数
     * @param {*} errorMsg 当校验未通过时返回的错误信息
     */
    add (value, rule, errorMsg) {
        var param = rule.split(':') // 把 strategy 和参数分开
        this.cache.push(() => { // 把校验的步骤用空函数包装起来,并且放入cache
            var strategy = param.shift() // 用户挑选的 strategy
            param.push(errorMsg) // 将errorMsg添加进参数列表
            return this.strategies[strategy].apply(value, param)
        })
    }

    /**
     * 检验
     */
    validate () {
        let errorMsgs = []
        for (let validatorFunc of this.cache) { // 遍历检验规则
            let msg = validatorFunc() // 调用校验方法
            if (msg) errorMsgs.push(msg) // 将错误信息存入到errorMsgs
        }
        if (errorMsgs.length > 0) return errorMsgs // 如果错误信息数组长度大于0则表明没有校验通过
    }
}

let validator = new Validator() // 创建一个 validator 对象
/***************添加一些校验规则****************/
validator.add('张三' , 'isNonEmpty', '用户名不能为空' )
validator.add('123', 'minLength:6', '密码长度不能少于6位' )
validator.add('135034', 'isMobile', '手机号码格式不正确' )
let errorMsg = validator.validate() // 获得校验结果
errorMsg.forEach(msg => { console.error(msg) }) // 输出：密码长度不能少于6位 手机号码格式不正确

var Singleton = function(name) {
    this.name = name
    //一个标记，用来判断是否已将创建了该类的实例
    this.instance = null
}
// 提供了一个静态方法，用户可以直接在类上调用
Singleton.getInstance = function(name) {
    // 没有实例化的时候创建一个该类的实例
    if(!this.instance) {
        this.instance = new Singleton(name)
    }
    // 已经实例化了，返回第一次实例化对象的引用
    return this.instance
}

var a = Singleton.getInstance('sven1')
var b = Singleton.getInstance('sven2')

console.log(a === b) // 输出true
console.log(a) // 输出Singleton {name: "sven1", instance: null}
console.log(b) // 输出Singleton {name: "sven1", instance: null}

class Singleton {
    constructor(name) {
        this.name = name
        this.instance = null
    }
    // 构造一个广为人知的接口，供用户对该类进行实例化
    static getInstance(name) {
        if(!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance
    }
}

var a = Singleton.getInstance('sven1')
var b = Singleton.getInstance('sven2')

console.log(a === b) // 输出true
console.log(a) // 输出Singleton {name: "sven1", instance: null}
console.log(b) // 输出Singleton {name: "sven1", instance: null}

// constructor中输出
Singleton {name: "sven1", instance: null}

// getInstance中输出
function(name) {
    this.name = name;
    //一个标记，用来判断是否已将创建了该类的实例
    this.instance = null;
    console.log(`constructor:${Singleton}`)
}

var a = Singleton.getInstance('sven1')
var b = Singleton.getInstance('sven2')
var c = new Singleton('sven3')

console.log(a === b) // 输出true
console.log(a) // 输出Singleton {name: "sven1", instance: null}
console.log(b) // 输出Singleton {name: "sven1", instance: null}
console.log(a === c) // 输出false
console.log(c) // 输出Singleton  {name: "sven3", instance: null}

var Singleton = function(name) {
	if (!Singleton.instance) {
        this.name = name
        //一个标记，用来判断是否已将创建了该类的实例
        Singleton.instance = this
	}
	return Singleton.instance
}
// 提供了一个静态方法，用户可以直接在类上调用
Singleton.getInstance = function(name) {
    // 没有实例化的时候创建一个该类的实例
    if(!this.instance) {
        this.instance = new Singleton(name)
    }
    // 已经实例化了，返回第一次实例化对象的引用
    return this.instance
}

var a = Singleton.getInstance('sven1')
var b = Singleton.getInstance('sven2')
var c = new Singleton('sven3')

console.log(a === b) // 输出true
console.log(a) // 输出Singleton {name: "sven1"}
console.log(b) // 输出Singleton {name: "sven1"}
console.log(a === c) // 输出true
console.log(c) // 输出Singleton  {name: "sven1"}

class Singleton {
    constructor(name) {
        if (!Singleton.instance) {
            this.name = name
            //一个标记，用来判断是否已将创建了该类的实例
            Singleton.instance = this
		}
		return Singleton.instance
    }
    // 构造一个广为人知的接口，供用户对该类进行实例化
    static getInstance(name) {
        if(!this.instance) {
            this.instance = new Singleton(name)
        }
        return this.instance
    }
}

var a = Singleton.getInstance('sven1')
var b = Singleton.getInstance('sven2')
var c = new Singleton('sven3')

console.log(a === b) // 输出true
console.log(a) // 输出Singleton {name: "sven1"}
console.log(b) // 输出Singleton {name: "sven1"}
console.log(a === c) // 输出true
console.log(c) // 输出Singleton  {name: "sven1"}

import React from 'react'
import PropTypes from 'prop-types'
import {
  StyleSheet,
  Button,
  Dimensions,
  TextInput,
  Text,
  View,
  Alert,
} from 'react-native'

import { createForm } from 'rc-form'

const { width } = Dimensions.get('window')
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    padding: 50,
    justifyContent: 'center',
  },
  inputView: {
    width: width - 100,
    paddingLeft: 10,
  },
  input: {
    height: 42,
    fontSize: 16,
  },
  errorinfo: {
    marginTop: 10,
  },
  errorinfoText: {
    color: 'red',
  },
})

class FromItem extends React.PureComponent {
  getError = error => {
    if (error) {
      return error.map(info => {
        return (
          <Text style={styles.errorinfoText} key={info}>
            {info}
          </Text>
        )
      })
    }
  }
  render() {
    const { label, onChange, value, error } = this.props
    return (
      <View style={styles.inputView}>
        <TextInput
          style={styles.input}
          value={value || ''}
          label={`${label}：`}
          duration={150}
          onChangeText={onChange}
          highlightColor="#40a9ff"
          underlineColorAndroid="#40a9ff"
        />
        <View style={styles.errorinfo}>{this.getError(error)}</View>
      </View>
    )
  }
}

class App extends React.Component {
  static propTypes = {
    form: PropTypes.object.isRequired,
  }

  checkUserNameOne = (value, callback) => {
    setTimeout(() => {
      if (value === '15188888888') {
        callback('手机号已经被注册')
      } else {
        callback()
      }
    }, 2000)
  }
  submit = () => {
    this.props.form.validateFields((error) => {
      if (error) return
      Alert('通过了所有验证') // eslint-disable-line new-cap
    })
  }
  render() {
    const { getFieldDecorator, getFieldError } = this.props.form
    return (
      <View style={styles.container}>
        <Text>简单的手机号验证</Text>
        {getFieldDecorator('username', {
          validateFirst: true,
          rules: [
            { required: true, message: '请输入手机号!' },
            {
              pattern: /^1\d{10}$/,
              message: '请输入正确的手机号!',
            },
            {
              validator: (rule, value, callback) => {
                this.checkUserNameOne(value, callback);
              },
              message: '手机号已经被注册!',
            },
          ],
        })(
          <FromItem
            autoFocus
            placeholder="手机号"
            error={getFieldError('username')}
          />
        )}
        <Button color="#40a9ff" onPress={this.submit} title="登陆" />
      </View>
    )
  }
}

export default createForm()(App)

const { getFieldDecorator, getFieldError } = this.props.form
....
{getFieldDecorator('username', {
	validateFirst: true,
	rules: [
		{ required: true, message: '请输入手机号!' },
		{
			pattern: /^1\d{10}$/,
			message: '请输入正确的手机号!',
         },
		{
        	validator: (rule, value, callback) => {
		    	this.checkUserNameOne(value, callback);
			},
			message: '手机号已经被注册!',
         },
	],
})(
	<FromItem
		autoFocus
		placeholder="手机号"
		error={getFieldError('username')}
	/>
)}
...

getFieldDecorator(fieldName, fieldOption) => (Component) => ComponentWithExtraProps

/** 
 *  {getFieldDecorator(name,fieldOption)(<FormItem {...props}/>)}将表单项包装为高阶组件后返回
 *  实现功能同getFieldProps方法，内部也调用getFieldProps方法
 *  与getFieldProps方法不同的是，被封装表单项的props作为this.fieldMeta[name]的originalProps属性
 *  originalProps属性的主要目的存储被封装表单项的onChange事件，fieldOption下无同类事件时，执行该事件
 *  不推荐将value、defaultValue作为表单项组件如FormItem的props属性
 */
getFieldDecorator: function getFieldDecorator(name, fieldOption) {
	var _this = this;
	// 获取需要传递给被修饰元素的属性。包括onChange,value等
    // 同时在该props中设定用于收集元素值得监听事件(onChange)，以便后续做双向数据。
	var props = this.getFieldProps(name, fieldOption);
     return function (fieldElem) {
     	  // 此处fieldStore存储字段数据信息以及元数据信息。
          // 数据信息包括value,errors,dirty等
          // 元数据信息包括initValue,defaultValue，校验规则等。
          var fieldMeta = _this.getFieldMeta(name);
          var originalProps = fieldElem.props;
          ...
          fieldMeta.originalProps = originalProps;
          fieldMeta.ref = fieldElem.ref;
          return _react2["default"].cloneElement(fieldElem, (0, _extends3["default"])({}, props, _this.getFieldValuePropValue(fieldMeta)));
      };
};

...
const { label, onChange, value, error } = this.props
return (
	<View style={styles.inputView}>
		<TextInput
			style={styles.input}
			value={value || ''}
			label={`${label}：`}
			duration={150}
			onChangeText={onChange}
			highlightColor="#40a9ff"
			underlineColorAndroid="#40a9ff"
		/>
		<View style={styles.errorinfo}>{this.getError(error)}</View>
	</View>
)
...

getFieldError(fieldName) => errors数组

// 获取this.fields[name]["errors"]错误数据，并剔除没有error.message的错误数据
getFieldError: function getFieldError(name) {
	return (0, _utils.getErrorStrs)(this.getFieldMember(name, 'errors'));
},
// 获取this.fields[name][member]属性数据
getFieldMember: function getFieldMember(name, member) {
	var field = this.getField(name);
	return field && field[member];
},

...
<FromItem
	...
	error={getFieldError('username')}
/>
...
// 在FromItem.js中
...
const { label, onChange, value, error } = this.props
return (
	<View style={styles.inputView}>
		...
		<View style={styles.errorinfo}>{this.getError(error)}</View>
	</View>
)
...
// 返回error信息组件函数
getError = error => {
    if (error) {
      return error.map(info => {
        return (
          <Text style={styles.errorinfoText} key={info}>
            {info}
          </Text>
        )
      })
    }
  }

// FormItem.js

import BaseFormItem from './base-form-item' // 表单项组件基类

class FromItem extends BaseFormItem {
  render() {
    const { label, onChange, value, prop, rules, form } = this.props;
    const { getFieldDecorator, getFieldError } = form;
    return (
      <View style={styles.inputView}>
      	{getFieldDecorator(prop, {rules})(
      		<TextInput
              style={styles.input}
              value={value || ''}
              label={`${label}：`}
              duration={150}
              onChangeText={onChange}
              highlightColor="#40a9ff"
              underlineColorAndroid="#40a9ff"
            />
            <View style={styles.errorinfo}>{this.getError(getFieldError(prop))}</View>
      	)}
      </View>
    );
  }
}

/**
 * 表单项基类
 */
class BaseFormItem extends Component {
  getError = (error) => {
    if (error) {
      return error.map(info => <Text style={{color: 'red'}} key={info}>{info}</Text>)
    }
    return null
  }
}

class App extends React.Component {
	constructor(props) {
        super(props)

        this.state = {
          rules: { // 定义校验规则
            username: [
              	{ required: true, message: '请输入手机号!' },
                {
                  pattern: /^1\d{10}$/,
                  message: '请输入正确的手机号!',
                },
                {
                  validator: (rule, value, callback) => {
                    this.checkUserNameOne(value, callback);
                  },
                  message: '手机号已经被注册!',
                },
            ],
          },
        }
    }
    ...
    render() {
    	const { form } = this.props
        return (
        	<View>
              <FromItem
              	form={form}
              	prop="username"
              	rules={this.state.rules.username}
                autoFocus
                placeholder="手机号"
              />
              <Button color="#40a9ff" onPress={this.submit} title="登陆" />
      		</View>
        )
    }
}

@startuml
Decorator <|-- ConcreteDecoratorA
Decorator <|-- ConcreteDecoratorB

Component <|-- Decorator
Component <|-- ConcreteComponent

Decorator o-- Component

Component: +Operation()
ConcreteComponent: +Operation()
Decorator: +Operation()
class ConcreteDecoratorA {
 {field} addedState
 {method} Operation()
}
ConcreteDecoratorB: +Operation()
ConcreteDecoratorB: AddedBehavior()

@enduml

/**
 * 表单项装饰函数（详情可参考React高阶组件）
 * @param {*} WrappedComponent 传入React组件对象
 * @returns 经过加工后新的React组件
 */
const formItemDecorator = function formItemDecorator(WrappedComponent) {
  return class extends Component {
    componentWillMount() {
      const { form, prop, rules } = this.props
      const { getFieldDecorator } = form
      this.fieldDecorator = getFieldDecorator(prop, {rules: [...rules]})
    }

    render() {
      const {form, prop} = this.props
      const {getFieldError} = form
      return (
        <View>
          {this.fieldDecorator(<WrappedComponent {...this.props} error={getFieldError(prop)} />)}
        </View>
      )
    }
  }
}


//InputItem.js中使用
export default formItemDecorator(InputItem)