React Native填坑之旅--Button篇

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: ,
        borderColor: 'blue',
        borderWidth: ,
        borderRadius: 
    },
});
           

應用這個樣式：

<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: ,
        borderColor: 'blue',
        borderWidth: ,
        borderRadius: 
           

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都可以用。多省事兒，而且這樣的定制并不費事。