1. 程式人生 > >react native Button 使用詳解

react native Button 使用詳解

Button其實就是 Touchable(TouchableNativeFeedback、TouchableOpacity)和Text封裝而來,下面是Button的部分原始碼:

render() {
    const {
      accessibilityLabel,
      color,
      onPress,
      title,
      disabled,
    } = this.props;
    const buttonStyles = [styles.button];
    const textStyles = [styles.text];
    const
Touchable = Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity; if (color && Platform.OS === 'ios') { textStyles.push({color: color}); } else if (color) { buttonStyles.push({backgroundColor: color}); } if (disabled) { buttonStyles.push(styles.buttonDisabled); textStyles.push(styles.textDisabled); } invariant( typeof
title === 'string', 'The title prop of a Button must be a string', ); const formattedTitle = Platform.OS === 'android' ? title.toUpperCase() : title; return ( <Touchable accessibilityComponentType="button" accessibilityLabel={accessibilityLabel} accessibilityTraits={['button'
]} disabled={disabled} onPress={onPress}> <View style={buttonStyles}> <Text style={textStyles}>{formattedTitle}</Text> </View> </Touchable> ); }

由此可見android是TouchableNativeFeedback ,ios是TouchableOpacity,android下title預設大寫。
屬性:

title:Button顯示的文字。
accessibilityLabel:據說這個是用於盲文的,讀屏器軟體可能會讀取這一內容(由於沒有相關裝置未做考證,在這裡也請教下大家。)。
color:ios表示字型的顏色,android表示背景的顏色(莫名其妙啊,不知道為什麼這樣設計)。
disabled:是否可用,如果為true,禁用此元件的所有互動。
onPress:點選觸發函式。

demo:

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

    export default class ButtonDemo extends Component {

    render() {
        return (
            <View style={{flex:1}}>
                <Button title='預設Button' accessibilityLabel='accessibilityLabel'/>
                <Button title='color設定為紅色' color='red' />
                <Button title='禁用' disabled={true} onPress={()=>{
                    ToastAndroid.show('點我了');
                }}/>
                <Button title='禁用' onPress={()=>{
                    ToastAndroid.show('點我了',ToastAndroid.SHORT);
                }}/>
            </View>
        );
    }
    }

效果圖:

這裡寫圖片描述