React Native填坑之旅--Button篇
React Native填坑之旅--動畫
React Native填坑之旅--HTTP請求篇

從React過來，發現React Native（以下簡稱RN）居然沒有Button。隔壁的iOS是有UIButton的，隔壁的隔壁的Android里也是有的。沒有Button，就沒有點擊效果啊。這還真是讓人郁悶了。

坑

什么叫Button。略去各種細節可以得出一個定義：可以處理用戶點擊，在用戶按下的時候有按下的效果，松開之后立即回復到原來的效果上。

在React里，可以使用直接使用HTML的元素。比如，<button />或者<input type="button" value="button" />。但是，在RN里是沒有類似標簽直接作為Button使用的。

發現

于是乎找了找RN官網的文檔，發現了一個可以處理點擊的TouchableHighlight。具體可以看這里。

既然可以處理點擊就實現了Button很大的一個功能點了。動手實現一個：

import React from 'react';
import {
    TouchableHighlight,
    Text,
    Alert
} from 'react-native';

export default class TouchableButton extends React.Component {
    render() {
        return (
            <TouchableHighlight onPress={
                ()=> {
                    Alert.alert(
                        `你點擊了按鈕`,
                        'Hello World！',
                        [
                            {text: '以后再說', onPress: () => console.log('Ask me later pressed')},
                            {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                            {text: '確定', onPress: () => console.log('OK Pressed')},
                        ]
                    )
                }
            }>
                <Text>Button</Text>
            </TouchableHighlight>
        );
    }
}

效果就是這樣的：

點擊以后是這樣的：

目前這個按鈕只可以被稱為是一個可以點擊的Label。如果你保持按下的手勢，不會有任何的變化。

填坑

我們的目標就是讓按鈕在按下的時候讓用戶知道他按鈕處在按下的狀態。

樣式

但是，在這之前需要讓用戶知道這個按鈕在哪里，范圍是多大。這就需要樣式出馬了。React可以使用HTML的CSS樣式，但是推薦使用的是自包含（self-contain）的樣式。正好這個推薦的方式也是React-Native支持的。

const styles = StyleSheet.create({
    button: {
        padding: 10,
        borderColor: 'blue',
        borderWidth: 1,
        borderRadius: 5
    },
});

應用這個樣式：

    <TouchableHighlight onPress={
        ()=> {
            Alert.alert(
                `你點擊了按鈕`,
                'Hello World！',
                [
                    {text: '以后再說', onPress: () => console.log('Ask me later pressed')},
                    {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                    {text: '確定', onPress: () => console.log('OK Pressed')},
                ]
            )
        }
   + } style={styles.button}>
        <Text>Button</Text>
    </TouchableHighlight>

看起來就是這樣了。

Style果然是很好用啊，來看看這些樣式都實現了什么。

        padding: 10,
        borderColor: 'blue',
        borderWidth: 1,
        borderRadius: 5

padding就不用說了。其他的就是畫了邊框，邊框的寬為1px，顏色是藍色，最后指定了圓角。

按下，hold住

如何區分什么時候是按下的，什么時候是按下松開的這就提上日程了。

處理這個問題需要請出React的State了。默認狀態State是未按下（pressed為false），按下了改為pressed為true。就醬。

這需要用到TouchableHighlight的兩個事件onShowUnderlay按下調用和onHideUnderlay，這個在按下松開后調用。 在這兩個事件發生的時候修改state, 這樣就會觸發整個組件重繪。

    <TouchableHighlight onPress={
        ()=> {
            // Alert.alert(
            //     `你點擊了按鈕`,
            //     'Hello World！',
            //     [
            //         {text: '以后再說', onPress: () => console.log('Ask me later pressed')},
            //         {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
            //         {text: '確定', onPress: () => console.log('OK Pressed')},
            //     ]
            // )
        }
+    } style={[styles.button, this.state.pressed ? {backgroundColor: 'green'} : {}]}
+    onHideUnderlay={()=>{this.setState({pressed: false})}}
+    onShowUnderlay={()=>{this.setState({pressed: true})}}>
        <Text>Button</Text>
    </TouchableHighlight>

完畢

這樣實現出來之后Android和iOS都可以用。多省事兒，而且這樣的定制并不費事。