【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);
具体运行结果截图:
(四)最后总结
今天我们主要看一下简单封装Button按钮以及使用。大家有问题可以加一下群React Native技术交流1群( 282693535 ),React Native技术交流2群( 496601483 ).或者底下进行回复一下。
尊重原创,转载请注明:From Sky丶清( http://www.lcode.org/ ) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)
关注我的微博,可以获得更多精彩内容