React Native 交互组件之 Button

一个简单的跨平台的按钮组件。可以进行一些简单的定制。
这个组件的样式是固定的。所以如果它的外观并不怎么搭配你的设计，那你需要使用 TouchableOpacity 或是 TouchableNativeFeedback 组件来定制自己所需要的按钮。

属性

name	type	desc
onPress	function	用户点击此按钮时所调用的处理函数
title	string	按钮内显示的文本
color	color	文本的颜色(iOS)，或是按钮的背景色(Android)
disabled	bool	设置为 true 时此按钮将不可点击。
accessibilityLabel	string	用于给残障人士显示的文本（比如读屏应用可能会读取这一内容）

实例

逻辑代码

import React, {Component} from 'react';
import {
  StyleSheet, 
  Button, 
  ToastAndroid,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button 
         style = {styles.welcome}
         title='默认Button' 
         accessibilityLabel='accessibilityLabel'
        />

        <Button 
         style = {styles.welcome}
         title='绿色的按钮' 
         color='green' 
        />

        <Button 
         style = {styles.welcome}
         title='禁用' 
         disabled={true} 
        />

        <Button 
         style = {styles.welcome}
         title='点击' 
         onPress={()=>{
            ToastAndroid.show('点我了',ToastAndroid.SHORT);
         }}
         />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    marginTop: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

效果图

btn_demo.jpg