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

效果图
React Native 交互组件之 Button