react native button 按钮

用react native自定义一个button按钮

button代码，响应按下事件，设置获取disabled状态，设置获取显示文本

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

export default class Button extends Component {
    constructor(props) {
        super(props);
        this.state = {
            disabled: props.disabled,
            text: props.text,
        }
    }

    onPress_() {
        if (typeof this.props.onPress === 'function') {
            this.props.onPress();
        }
    }

    setDisabled_(yes) { this.setState({disabled: yes}); }
    isDisabled_() { return this.state.disabled; }

    setText_(text) { this.setState({text: text}); }
    text_() { return this.state.text; }

    render() {
        return (
            <TouchableOpacity 
                style={[styles.button, this.state.disabled && styles.disabled]} 
                onPress={this.onPress_.bind(this)} 
                disabled={this.state.disabled} >
                <Text style={styles.text}>
                    {this.state.text}
                </Text>
            </TouchableOpacity>
        )
    }
}

styles = StyleSheet.create({
    button: {
        backgroundColor:'#0c3ba9',
        width: 80,
        height: 40,
        justifyContent: 'center',
        borderRadius: 10,
        overflow: 'hidden',
    },
    text: {
        textAlign: 'center',
        color: '#fff',
        fontSize: 16,
    },
    disabled: {
        backgroundColor: '#999999'
    }
})

测试代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import Button from '../common/Button.js'

export default class ButtonTest extends Component {

  onToggle_() {
    this.refs.okButton.setDisabled_(!this.refs.okButton.isDisabled_());
  }

  render() {
    return (
      <View style={styles.container}>
        <Button ref="okButton" text="确定" onPress={()=>{alert(this.refs.okButton.text_())}} />
        <Button text="切换状态" onPress={this.onToggle_.bind(this)} />
        <TextInput style={styles.textInput} placeholder="改变确定按钮文本" onChangeText={(text) => this.refs.okButton.setText_(text)} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  textInput: {
    width: 130,
  }
});