【React Native开发】React Native控件之组件封装实例

来自： http://www.lcode.org/【react-native开发】react-native控件之组件封装实例button按钮/

(一)前言

今天我们一起来看一下WebView组件讲解以及使用实例

刚创建的React Native技术交流1群( 282693535 ),React Native技术交流2群( 496601483 ),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

做为客户端开发来讲，Button(按钮组件)是最基本的，在React Native中也存在相关Touchable*系列的组件来实现点击事件(详细请点击)。下面我们来进行稍微封装一个Button组件,然后进行单独使用，其实用法和之前的差不多。

(二)使用说明

我们创建渲染一个ModeCustomButton组件，里边包含TouchableHightlight以及Text组件，然后返回，在其他地方可以进行使用。具体渲染代码如下:

class MoreCustomButton extends React.Component {    render() {      return (        <TouchableHighlight          style={styles.button}          underlayColor="#a5a5a5"          onPress={this.props.onPress}>          <Text style={styles.buttonText}>{this.props.text}</Text>        </TouchableHighlight>      );    }  }

(三)简要实例

该具体封装以及使用实例如下:

/**   * Sample React Native App   * https://github.com/非死book/react-native   */  'use strict';  import React, {    AppRegistry,    Component,    StyleSheet,    Text,    View,    TouchableHighlight,    ToastAndroid,  } from 'react-native';    class MoreCustomButton extends React.Component {    render() {      return (        <TouchableHighlight          style={styles.button}          underlayColor="#a5a5a5"          onPress={this.props.onPress}>          <Text style={styles.buttonText}>{this.props.text}</Text>        </TouchableHighlight>      );    }  }  class CustomButton extends Component {    render() {      return (        <MoreCustomButton            onPress={() => {            ToastAndroid.show('你点击了我了~好疼！', ToastAndroid.LONG)}}            text="请点击我~"          />      );    }  }  const styles = StyleSheet.create({    button: {      margin:5,      backgroundColor: 'white',      padding: 15,      borderBottomWidth: StyleSheet.hairlineWidth,      borderBottomColor: '#cdcdcd',    }  });    AppRegistry.registerComponent('CustomButton', () => CustomButton);

具体运行结果截图: