最近开始学习React Native，下面简单记录和分享下RN中如何制作按钮以及按钮的简单封装。

1.按钮封装文件

/src/component/Button.js

/**
* daren 2016-07-23
*/

//导入React组件
import React, { Component } from 'react';
//导入React Native组件
import {
   StyleSheet,
   Text,
   View,
   TouchableHighlight, //原生视图按钮组件 点击时候会变亮 有自带的颜色 颜色不太自然
   TouchableOpacity    //不会改变按钮底层颜色 只会改变透明度
} from 'react-native';
//主类文件，继承RN的Component
//注意：如果是抽取封装一个类想要在其他文件中调用，必须在class前面加上 export default
//即：export default class 类名称 extends Component {//类主体内容}
export default class Button extends Component {
   //解构：props
   constructor(props){
       super(props);
       this.state = {
           disabled:false,
       };
   }
   //定义点击事件函数
   onPress = () => {
       console.log(1);
       const { onPress } = this.props;
       this.disable();
       onPress(this.enable);//异步 使用回调
   };
   //定义启用按钮函数
   enable = () => {
       console.log(4);
       this.setState({
           disabled:false,
       });
   };
   //定义禁用按钮函数
   disable = () => {
       console.log(2);
       this.setState({
           disabled:true,
       });
   };
   //RN中render函数
   render() {
       //解构 从props活的text属性值
       const { text } = this.props;
       return (
           <View style={styles.container}>
               {/* 按钮 */}
               <TouchableOpacity
                   style={[styles.button , this.state.disabled && styles.disabled]}
                   onPress={this.onPress}
                   disabled={this.state.disabled}
               >
                   <Text style={styles.buttonText}>{this.props.text}</Text>
               </TouchableOpacity>

           </View>
       );
   }
}

const styles = StyleSheet.create({
   button:{
       height:40,
       width:150,
       borderRadius:15,
       backgroundColor:'green',
       justifyContent:'center',
       overflow:'hidden',


   },
   buttonText:{
       textAlign:'center',
       color:'white',
   },
   container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#F5FCFF',
   },
   disabled:{
       backgroundColor:'gray',
   },

});