react -native 自定义按钮

最新推荐文章于 2024-06-22 14:34:01 发布

Hi竹子

最新推荐文章于 2024-06-22 14:34:01 发布

阅读量1.5k

点赞数

分类专栏： React Native 文章标签： react -native 自定义按钮

竹子原创，转载请附链接和署名

本文链接：https://blog.csdn.net/u010411264/article/details/53982015

版权

React Native 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

注：为了演示方便，以下实例都是通过index.android.js作为入口函数做测试的

react -native 自定义按钮

AutoButton.js

/**
* lutn 2017-01-01 
* 自定义按钮
* 使用 
   
   
    
    
*/
import React, { Component } from 'react';
import {StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class AutoButton extends Component{
  constructor(props){
      super(props);
      this.state={
        disabled:
      }
  }
  _onPress = () =>{
    const {onPress} = this.props;
    if ( onPress != null) {
      onPress();
    }
  }
  render() {
    const {text,bgColor,color} = this.props;
    return (
        
    
    
            
     
     
                
      
      
       
       
                    {text}
                
      
      
            
     
     
        
    
    
    )
  }
}
const styles = StyleSheet.create({
  button:{
    width:120,
    height:40,
    borderRadius:25,
    backgroundColor:"#33ffff",
    justifyContent:'center'
  },
  buttonText: {
      fontSize: 20,
      textAlign: 'center',
      color:'red'
  }
});

index.android.js

/**
 * lutn 2017-01-01
 * 自定义按钮测试
 */

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

import Print from './ui/Print'; 
import AutoButton from './ui/AutoButton';

export default class demo extends Component {
  _onPress = ()=>{
    alert("你好");
  } 
  render() {
    return (
      
   
   
        
    
    
        
    
    

        
     
     
      
     
     
    
    
   
   
      
    )
  }
}
AppRegistry.registerComponent('demo', () => demo);
const styles =StyleSheet.create({
    btn:{
      marginTop:10
    }

});