React Native - 08 - 响应点击

用户主要通过触摸与移动应用进行交互。他们可以使用手势组合，例如点击按钮，滚动列表或缩放地图。 React Native提供组件来处理各种常见的手势，以及一个全面的手势响应系统，以允许更高级的手势识别，但是你最可能感兴趣的一个组件是基本的Button。

显示按钮

按钮提供了一个基本的按钮组件，可以在所有平台上很好地渲染。显示按钮的最小示例如下所示

<Button
  onPress={() => {
    Alert.alert('You tapped the button!');
  }}
  title="Press Me"
/>

这将在iOS上呈现蓝色标签，在Android上呈现蓝色圆角矩形，并显示白色文字。按下按钮将调用“onPress”功能，在这种情况下显示一个警报弹出窗口。如果你喜欢，你可以指定一个“颜色”道具来改变你的按钮的颜色。

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

export default class ButtonBasics extends Component {
    _onPressButton() {
        Alert.alert('You tapped the button!');
    }

    render() {
        return (
            <View style={ styles.container } >
                <View style={ styles.buttonContainer } >
                    <Button 
                        onPress={this._onPressButton}
                        title='Press Me'
                    />
                </View>
                <View style={ styles.buttonContainer } >
                    <Button 
                        onPress={this._onPressButton}
                        title='Press Me'
                        color='#841584'
                    />
                </View>
                <View style={ styles.alternativeLayoutButtonContainer } >
                    <Button 
                        onPress={this._onPressButton}
                        title='This loos great!'
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    buttonContainer: {
        margin: 20,
    },
    alternativeLayoutButtonContainer: {
        margin: 20,
        flexDirection: 'row',
        justifyContent: 'space-between'
    }
});

image.png

可点击

如果基本按钮看起来不适合您的应用程序，则可以使用React Native提供的任何“可触摸”组件构建您自己的按钮。 “可触摸”组件提供了捕捉敲击手势的能力，并且可以在识别手势时显示反馈。但是，这些组件不提供任何默认样式，因此您需要做一些工作才能让它们在您的应用中很好地显示。

您使用哪个“可触摸”组件取决于您想要提供的反馈类型：

• 通常，您可以使用TouchableHighlight在任何地方使用网页上的按钮或链接。当用户按下按钮时，视图的背景会变暗。
• 您可以考虑在Android上使用TouchableNativeFeedback来显示响应用户触摸的墨水表面反应波纹。
• TouchableOpacity可用于通过减少按钮的不透明度来提供反馈，从而在用户按下时可以看到背景。
• 如果您需要处理轻按手势，但不想显示任何反馈，请使用TouchableWithoutFeedback。

在某些情况下，您可能需要检测用户何时按下并保持一定的时间。这些长按可以通过将功能传递给任何“可触摸”组件的onLongPress支柱来处理。

import React, { Component } from 'react';
import { Alert, Platform, StyleSheet, Text, TouchableHightlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View, TouchableHighlight } from 'react-native';

export default class Touchables extends Component {
    _onPressButton() {
        Alert.alert('You tapped the button!');
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!');
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighlight</Text>
                    </View>
                </TouchableHighlight>
                <TouchableOpacity onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                <TouchableNativeFeedback
                    onPress={this._onPressButton}
                    background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback
                    onPress={this._onPressButton}
                    >
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Touchable with Long Press</Text>
                    </View>
                </TouchableHighlight>
            </View>          
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3'
    },
    buttonText: {
        padding: 20,
        color: 'white'
    }
});

image.png