react native button 按钮

来源：互联网发布：网络名誉侵权判决编辑：程序博客网时间：2024/04/29 07:43

用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,  }});

0 0