Notoriously Punctual Manatee

    nuke-components

    0.2.36 • Public • Published

    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" />
    

    Install

    npm i nuke-components

    DownloadsWeekly Downloads

    124

    Version

    0.2.36

    License

    none

    Last publish

    Collaborators

    • bindoon
    • doub
    • fnatic
    • leanhunter