nuke-components

nuke-components

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

---

View

View 是最基础的组件，它支持Flexbox、touch handling等功能，并且可以任意嵌套。

不论在什么容器中，View 都直接对应一个容器的原生视图，就像 web 中的 div 一样。

最简单的示例：

<View>
  <Text>Hi<Text>
</View>

Text

Text 用于显示文本，在 web 中实际上是一个 span 标签而非 p 标签。

Rx 的 Text 标签不支持嵌套，默认展现样式会沾满行。

Text 响应以下事件：

• onPress

例:

<Text style={{
    color: '#3c3c3c',
    fontSize: '20rem'
  }}> 文本内容 </Text>

Image

Image 用于显示图片，它的属性有：

• scoure: 设置图片的 uri
• style: 样式 图片不设置宽高则默认为0x0
• resizeMode: 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

例：

render() {
    return (
      <Image source={{
        uri: '//img.alicdn.com/image.png'
      }} style={{
        width: '100rem',
        height: '100rem',
      }}
      resizeMode={'cover'}   //也可以放在style里
      />
    );
  }

这里的 Image 组件只提供了基础的图片展示，更好的显示图片可以使用 UI 组件 http://rx.taobao.net/rxui/#image,支持图片的懒加载和质量压缩后缀等。

TextInput

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

它支持的属性有：

• multiline: 定义该属性文本框可以输入多行文字
• accessibilityLabel: 为元素添加标识
• autoComplete: 添加开启自动完成功能
• autoFocus: 添加开启获取焦点
• editable: 默认为true 如果为fase则文本框不可编辑
• keyboardType: 设置弹出哪种软键盘 可用的值有default ascii-capable numbers-and-punctuation url number-pad phone-pad name-phone-pad email-address decimal-pad twitter web-search numeric
• maxLength: 设置最大可输入值
• maxNumberOfLines: 当文本框为mutiline时设置最多的行数
• numberOfLines: 同上设置行数
• placeholder: 设置文本框提示
• password: 文本框内容密码显示
• secureTextEntry: 同上文本框内容密码显示
• style: 设置样式
• value: 文本框的文字内容

同时 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',
        border: '1px solid #000'
    }}
/>

ScrollView

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

它支持的属性有：

• scrollEventThrottle: 这个属性控制在滚动过程中，scroll事件被调用的频率（默认值为100），用于滚动的节流
• horizontal: 设置为横向滚动
• showsHorizontalScrollIndicator: 是否允许出现水平滚动条，默认true
• showsVerticalScrollIndicator: 是否允许出现垂直滚动条，默认true
• onEndReachedThreshold: 设置加载更多的偏移
• onEndReached: 滚动区域还剩 onEndReachedThreshold 的长度时触发（默认值为500） 使用示例：

<ScrollView onEndReachedThreshold={300} onEndReached={()=>{}}>
  <Text style={{
    color:'#ffffff',
    margin:'5rem',
    fontSize:'100rem',
    backgroundColor:"blue"
  }}>
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
      Shake or press menu button for dev menuShake or press menu button for dev menu
  </Text>
</ScrollView>

RecyclerView

ScrollView的同门师兄，在Weex下是对list与cell的包装，其具有复用内部组件来提供性能的机制。

<RecyclerView>
  <RecyclerView.Header>
    <View style={styles.sticky}>
      <Text>Sticky view must in header root</Text>
    </View>
  </RecyclerView.Header>
  <RecyclerView.Cell />
  <RecyclerView.Cell />
  <RecyclerView.Cell />
</RecyclerView>

ListView

原先的rx-listview

Link

Link 是基础的链接组件，同 a 标签。它带有默认样式 textDecoration: 'none'。

在浏览器中，同我们熟悉的 a 标签，使用 Link 标签并不能新开一个 webview ，它只是在当前的 webview 中做页面的跳转。

Link 响应以下事件：

• onPress

使用示例：

<Link href={'//path/to/url'}>{'这是一个链接'}</Link>

Button

Button 是基础的按钮组件。内部实现依赖 <TouchableHighlight> 支持 onPress 定义的点击事件。

Button 带有默认样式，同时也支持样式的自定义。

支持的属性：

• onPress: 点击事件

使用示例：

<Button onPress={()=>{}}>Click Me</Button>

TouchableHighlight

TouchableHighlight 定义简单的 touch 事件。 使用 TouchableHighlight 我们不用担心复杂的视图结构，也就是说我们不必再担心类似以前 tap 点击穿透这样的问题了。 对于复杂的手势事件，我们可以使用 @ali/rx-panresponder 。

支持的属性：

• onPress: 点击事件

使用示例：

<TouchableHighlight onPress={()=>{}}>Click Me</TouchableHighlight>

Switch

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

支持的属性：

• onTintColor: 设置开关打开的背景色
• tintColor: 设置开关关闭时的背景色
• thumbTintColor: 开关圆形按钮的背景色
• disabled: 开关是否可交互 true|false
• value: 开关默认状态开启或关闭 true|false
• onValueChange: 值改变时调用此函数

使用示例：

  state = {
    trueSwitchIsOn: true,
    falseSwitchIsOn: false
  };
  render() {
    return (
      <View style={styles.container}>
        <Text>
           Swtich实例
        </Text>
        <Switch onTintColor={'green'} tintColor={'#ffffff'} thumbTintColor={'blue'}
          onValueChange={(value) =>this.setState({falseSwitchIsOn: value})}
          value={this.state.falseSwitchIsOn}/>
        <Switch
          onValueChange={(value) =>this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn}/>
      </View>
    );
  }

video

Rx 中的视频播放组件。

支持的属性：

• autoPlay: 设置视频自动播放
• src: 视频地址

使用示例：

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