专栏首页大宇笔记React Native自定义Button

React Native自定义Button

效果:

引用文件代码:

import React, { Component } from 'react';
import {
   AppRegistry,
  Image,
    Text,
    View,
  StyleSheet,
} from 'react-native';

var ZYButton = require('./ZYButton')

class RNHybrid extends Component {
  render() {
    return(
        <View style={{marginTop:100,alignItems:'center'}}>
              <ZYButton
          clickBtn={()=>this.buttonClick()}
          btnStyle={styles.btnStyle}
          btnInnerTextStyle={styles.btnStyle}
           title="ZYButton"
           />
        </View>
      );   
  }

  buttonClick(){
    alert('buttonClick');
  }
};



const styles = StyleSheet.create({
    btnInnerTextStyle:{
       
    },

    btnStyle:{

    }
});


AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

ZYButton定制代码:

import React, { Component, PropTypes} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';


export default class ZYButton extends Component {
    // 对外开放属性
    static propTypes = {
        // 常用的属性
        title: PropTypes.string,
        bgImage:PropTypes.func,
        btnStyle: View.propTypes.style,
        btnInnerTextStyle:Text.propTypes.style,

        // 响应事件
        clickBtn: PropTypes.func
    };

    static defaultProps = {
        clickBtn(){},
        bgImage(){}
    };


    constructor(props){
        super(props);

        this.state = {
            selected:this.props.selected
        }
    }


    render() {
        return (
           <TouchableOpacity
               style={[styles.btnViewStyle, this.props.btnStyle]}
               onPress={()=>this.props.clickBtn()}
           >
               {this.props.bgImage()}
               <Text style={[styles.btnTextStyle, this.props.btnInnerTextStyle]}>{this.props.title}</Text>
           </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    btnViewStyle:{
        backgroundColor:'red',
        width:120,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:5
    },

    btnTextStyle:{
        color:'#fff',
        fontSize:16,
        backgroundColor:'transparent'
    }
});

module.exports = ZYButton;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cocospod 升级到指定版本

    ZY_FlyWay
  • Swift 使用lexicographicallyprecedes 多个参数排序

    版权声明:转载请标明出处 https://blog.csdn.net/ZY_FlyWay/article/details/89184264

    ZY_FlyWay
  • iOS 原生分享

    -(void)shareWithText:(NSString *)text AndIcon:(UIImage *)image AndUrl:(NSURL *...

    ZY_FlyWay
  • 16位乘风破浪的产品操盘手,2天深聊产品经理还有什么新可能!

    2020年已经过去了一半,但一切却像刚开始一样,一场疫情改变了2020年的打开方式,线下火速转型线上,各种变化纷至沓来。 在当前的互联网大环境下,增长遭遇天花...

    腾讯大讲堂
  • 7个小时,7万人的产品经理大会,究竟发生了什么?

    很久没有参加一个会议,干货太多厕所都舍不得去,宁愿憋伤自己。 --摘自参会者 hibaby 的朋友圈 由人人都是产品经理与腾讯大讲堂联合主办的2016中国产品经...

    腾讯大讲堂
  • 【数字化转型】为什么CXO认为在数字化转型中,客户体验比技术更重要

    周一发布的IBM全球C-suite研究报告显示,cxo不再认为技术是未来两三年影响其业务的首要因素。相反,在调查的来自20个行业和112个国家/地区的12800...

    首席架构师智库
  • Ajax对XML信息的接收和处理

    Ajax+JavaScript实现对xml的接收处理,可以方便我们后期实现一个静态网站(html+css+javascript)实现对各个接口数据的处理。

    Debug客栈
  • Ajax实现用户注册功能

    静心物语313
  • 小程序---调用后端接口的方法

    学习小程序一段时间了,写页面对我来说没有任何问题。最近学习如何请求后端接口,本来想请求项目中正在用的接口,可是无缘,微信小程序不允许。官方给出的提示是,接口必须...

    半指温柔乐
  • oracle转postgreSQL修改点

    从2019年开始,就有一个很火热的话题:“去O化”。O就是oracle,也就是将oracle替换成别的数据库。为什么要去O?大致有以下原因:

    贪挽懒月

扫码关注云+社区

领取腾讯云代金券