React Native填坑之旅--Button篇

Z时代
2024-01-10
分类：综合

react

从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>