一、描述

使用 rax^0.5.4 版本,因为我本地 rax^0.6.x 版本无法 start,详情查看 issue

rax-textinput 是 rax 的内置组件,官方文档地址如下:

主要的参数在文档中说的很明白,不再重复。

TIM截图20180806230512.jpg

二、源码

rax-textinput 的源码将近200行,其中大部分是对 props 和事件的处理。

实际上,它最终无非就是渲染出了 input 或者 textarea(根据 prop[multiline=true]渲染 textarea)。

文件:[rax-textinput/src/index.js]

    if (isWeex) {
      // Diff with web readonly attr, `disabled` must be boolean value
      let disabled = Boolean(propsCommon.readOnly);
      if (multiline) {
        return <textarea {...propsCommon} rows={20} disabled={disabled} />;
      } else {
        // https://github.com/alibaba/weex/blob/dev/doc/components/input.md
        return <input {...propsCommon} type={type} disabled={disabled} />;
      }
    } else {
      let input;
      if (multiline) {
        const propsMultiline = {
          maxRows: maxNumberOfLines || numberOfLines,
          minRows: numberOfLines
        };

        input = <textarea {...propsCommon} {...propsMultiline} >{propsCommon.value}</textarea>;
      } else {
        input = <input {...propsCommon} type={type} />;
      }
      return input;

上面代码中,因为 weex 的 textarea 组件和 web 的 textarea 组件是不一样的,(比如 weex 的 textarea 组件没有 col 属性,只有 row 属性),因此才需要区分 weex 环境还是 web 环境,而区分是基于 import {isWeex} from 'universal-env'; 的 weex 模块实现的。

rax 作为 weex 的上层 DSL ,打包生成的 jsbundle 跑在 weex 环境中,因此 weex 的大部分内容它是支持的,所以我一直认为 rax 不仅仅是一个 DSL,比 DSL 更高级,像是封装的 rax-view 这种组件本质都是渲染的 div。

目前我没有研究明白,为什么要进行这样的分装,直接使用 react 或者 类 react 语法不行吗?(现在的理解是,rax-view 这样的组件,在底部已经对 weex 和 web 环境做了兼容,保证在 native 环境下渲染不会出错且保证性能)。

三、实际使用

实际中使用 rax-textinput,按照组件的规范去使用即可,rax-textinput 抹平了 inputtextarea,通过 multipart prop 进行区分。

主要说明一下 keyboardType prop,用来弹起不同的键盘,可以取得值包括:

  • default
  • ascii-capable
  • numbers-and-punctuation
  • url
  • number-pad
  • phone-pad
  • name-phone-pad
  • email-address
  • decimal-pad
  • twitter
  • web-search
  • numeric

phone-pad 距离,在 native 环境下,键盘弹起如下:

      <TextInput 
        style={styles.textInput}
        maxLength = {11}
        placeholder="电话号码..."
        keyboardType="phone-pad"
        autoFocus={true}
      ></TextInput>

微信图片_20180806232000.jpg

四、事件

事件有下面这些:

  • onBlur
  • onFocus
  • onInput
  • onChange

使用方式就是正常的事件绑定

TIM截图20180806232629.jpg

比较关键的就是 onChangeonInput 获取值的方式,传入的参数是 event,而通过 event 有两种方式获取值。

TIM截图20180806232741.jpg

从上面的图可以看出来,两种获取值的方式分别是 event.valueevent.nativeEvent.value,在 native 环境和 web 环境中均可以使用。

目前的研究是,这种设计方式的 event.value 只是将 nativeEvent.value 抽了出来,使用更加方便。之后再 nativeEvent 的迭代中,可能还有其他的属性。