4.3 开发一个自己的业务组件

一个标准的ES6 语法的组件

• 每个组件都有一个 render 方法，用来接收数据然后返回要显示在页面上的内容。

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

开发一个自己的button

• 新建 AwesomeProject/src/components/easy-button.jsx

/* @jsx createElement */
import { createElement, Component } from 'weex-rx';
import { mount } from 'nuke-mounter';
import { View, Text, TouchableHighlight, Modal} from 'nuke';

class EasyButton extends Component {
    pressHandler(e){
        Modal.toast('hello weex')
    }
    render() {
        const {style,onPress,children} = this.props;
        return(
            <TouchableHighlight onPress={this.pressHandler.bind(this)} style={style}>
                <Text>{children}</Text>
            </TouchableHighlight>);       
  }
}

export default EasyButton;

使用：

/* @jsx createElement */
import { createElement, Component } from 'weex-rx';
import { mount } from 'nuke-mounter';
import {EasyButton} from './components/easy-button.jsx';
import { View, Text, TouchableHighlight, Modal} from 'nuke';

class Demo extends Component{
    render(){
        return <View><EasyButton children='我是按钮'></EasyButton></View>
    }
}

mount(<Demo />, 'body');

• TouchableHighlight

  在这个组件里，我们用到了基础组件 TouchableHighlight ，这个组件具备onPress 方法，而Text 组件没有onPress 方法。

• Text

  Text 用于包裹一段文本。