deprecated component

Components

• category: UI
• chinese: 原件
• type: UI 组件

View

View 是一个容器组件，类似于 web 端 div，它可以任意嵌套，但嵌套层数过深可能会导 致页面在安卓 5.0 以下或部分机型闪退。 View 有如下默认样式：

position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;

Text

Text 用于显示文本，类似于 web 端的 span 标签。 Text 标签不支持嵌套。

Image

API

| 属性配置 | 说明 | 类型 | 默认值 | | :--------- | :------------------------------------------------- | :------------------------------------------------- | :-------- | | source | 格式 {uri:"xxx"} | object | | | style | 必须写宽高，否则无法渲染 | object | | | resizeMode | 组件尺寸和图片尺寸不成比例的时候如何调整图片的大小 | 枚举类型，可选center contain cover stretch | stretch | | onLoad | 图片 onLoad 方法，其中 e.size 可返回图片真实宽高 | function(e) | |

• resizeMode 释义 - contain : 包含，在区域内图片完全展示，不拉伸，不裁剪 - cover : 覆盖，覆盖整个区域，可能图片本身会被部分被挡住而不显示，等比缩放，可能会裁 剪 - stretch : 拉伸，拉伸图片以撑满整个区域 - center : 图片可能会被缩小以完全 展示，但如果图片过小不会放大

例：

<Image
  source={{
    uri:
      'https://gd2.alicdn.com/imgextra/i2/413996455/TB2tNcJbd0opuFjSZFxXXaDNVXa_!!413996455.jpg'
  }}
  style={{ quality: 'original', width: '100rem', height: '100rem' }}
  resizeMode={'cover'}
/>;

TextInput

TextInput 是唤起用户输入的基础组件。当定义 multiline 输入多行文字时其功能相当于 textarea。

它支持的属性有：

| 属性 | 说明 | 类型 | 默认值 | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- | | multiline【即将废弃】 | 定义该属性文本框可以输入多行文字 | boolean | false | | multiple | 定义该属性文本框可以输入多行文字 | boolean | false | | accessibilityLabel | 为元素添加标识 | string | 无 | | autoComplete | 添加开启自动完成功能 | boolean | false//todo | | autoFocus | 添加开启获取焦点 | boolean | false | | editable | 文本框是否可编辑 | boolean | true | | keyboardType【即将废弃】 | 设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric | string | default | | type | 设置弹出哪种软键盘 可用的值有text url password tel date time email | string | text | | maxLength | 设置最大可输入值 | number | 无 | | maxNumberOfLines | 当文本框为 mutiline 时设置最多的行数 | number | 无 | | numberOfLines | 同上设置行数 | number | 无 | | placeholder | 设置文本框提示 | string | 无 | | password【即将废弃】 | 文本框内容密码显示 | | | secureTextEntry【即将废弃】 | 同上文本框内容密码显示 | | | value | 文本框的文字内容 | string | 无 | | style | 自定义样式 | Object | 无 |

同时 TextInput 响应下面几个事件：

• onBlur: 文本框失焦时调用此函数。onBlur={() => console.log(' 失焦啦 ')}
• onFocus: 文本框获得焦点时调用此函数
• onChange: 文本框内容变化时调用此函数
• onInput: 文本框输入内容时调用此函数

使用示例：

<TextInput
  placeholder="Enter text to see events"
  autoFocus
  multiline
  onFocus={() => console.log('onFocus')}
  onBlur={() => console.log('onBlur')}
  onInput={() => console.log('onInput')}
  style={{
    width: '1000rem',
    height: '1000rem',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#cccccc'
  }}
/>;

ScrollView

ScrollView 是一个包装了滚动操作的组件。一般情况下需要一个确定的高度来保证 ScrollView 的正常展现。

ScrollView

| 属性 | 说明 | 类型 | 默认值 | | ------------------------------ | --------------------------------------------------------------------- | ------- | ------ | | horizontal | 是否横向 | boolean | false | | scrollEventThrottle | 在滚动过程中，scroll 事件被调用的频率（默认值为 100），用于滚动的节流 | number | 100 | | showsHorizontalScrollIndicator | 是否显示水平滚动条 | boolean | true | | showsVerticalScrollIndicator | 是否显示垂直滚动条 | boolean | true | | onEndReachedThreshold | 设置加载更多的偏移 | string | 500rem | | onEndReached | 滚动到底部时的事件（diff 为 onEndReachedThreshold) | event | 无 |

resetLoadmore 实例方法

由业务自行控制的是否触发 loadmore 事件

当 onEndReached 触发，但是数据没有变化或者数组变短，native 认为不需要再触发 onEndReached 事件了。

此时调用 resetLoadmore ，可以清除某个标记位，让 onEndReached 可以再次触发。

TouchableHighlight

TouchableHighlight 定义简单的 touch 事件。

| 属性 | 说明 | 类型 | 默认值 | | ----------- | ---------------- | ----------- | ------ | | onPress | 点击事件 | function(e) | | activeStyle | 手指按下时的样式 | object |

使用示例：

<TouchableHighlight
  onPress={() => {}}
  style={{
    backgroundColor: '#3089dc',
    height: '60rem',
    justifyContent: 'center',
    alignItems: 'center'
  }}
  activeStyle={{ backgroundColor: '#cccccc' }}
>
  Hello Nuke
</TouchableHighlight>;

Switch

Switch 是状态切换的开关按钮组件。

Switch

| 属性 | 说明 | 类型 | 默认值 | | ------------- | --------------------------- | ------- | ------ | | size | 尺寸，可选medium ,small | string | medium | | disabled | 开关是否可交互 | boolean | true | | checked | 开关默认状态开启或关闭 | boolean | false | | onValueChange | 值改变时调用此函数 | event | 无 |

Video

视频播放组件，在 h5 端即 html5 的 video 标签。

因此如果用在 h5 端，在部分安卓机型上，可能有较多兼容性问题。

| 属性 | 说明 | 类型 | 默认值 | | -------- | ---------------- | ------- | ------ | | autoPlay | 设置视频自动播放 | boolean | false | | src | 视频地址 | string | 无 |

使用示例：

<Video autoPlay src="//path/to/url" />