文档中心 > 千牛开放平台2.0

开发一个业务组件

更新时间:2017/04/15 访问次数:2352

一个标准的ES6 语法的组件
- 每个组件都有一个 render 方法,用来接收数据然后返回要显示在页面上的内容。

如果你的项目中需要对常用业务组件进行封装,可以参考如下建议demo

开发一个自己的button

  • 新建 AwesomeProject/src/components/easy-button.jsx
'use strict';

import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal, Button, ScrollView} from 'nuke';
 
class EasyButton extends Component {
    pressHandler = (e)=>{
        Modal.toast('hello weex')
    }
    render() {
        const {style,onPress,children} = this.props;
        return(
            <TouchableHighlight onPress={this.pressHandler} style={style}>
                <Text>{children}</Text>
            </TouchableHighlight>);
  }
}

export default EasyButton;

使用:

'use strict';
 
import {createElement, Component, render, findDOMNode} from 'rax';
import {View, Text, TouchableHighlight, Modal, Button, ScrollView} from 'nuke';
import EasyButton from './components/easy-button.jsx';
 
class Demo extends Component{
    render(){
        return <View><EasyButton children='我是按钮'></EasyButton></View>
    }
}
 
render(<Demo />);

本文描述的例子只是让开发者快速入门,后续章节将会描述如何编写受控组件非受控组件

FAQ

关于此文档暂时还没有FAQ
返回
顶部