处理触摸事件

显示一个简单的按钮

ButtonBasics.js

/**
 * Created by zhoujian on 2019/4/9.
 */

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

export default class ButtonBasics extends Component {
    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 looks great!"/>
                    <Button
                        onPress={this.onPressButton}
                        title="OK!"
                        color="#841584"/>
                </View>
            </View>
        );
    }

    onPressButton() {
        Alert.alert('You tapped the button!')
    }
}

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

 

index.js

 

import {AppRegistry} from 'react-native';
import ButtonBasics from './js/ButtonBasics';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => ButtonBasics);

 

 

 

 

Touchable 系列组件

 

 

Touchables.js

/**
 * Created by zhoujian on 2019/4/9.
 */

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


export default class c extends Component {
    //TouchableHighlight:此组件的背景会在用户手指按下时变暗

    //TouchableOpacity:会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。

    //TouchableNativeFeedback :在 Android 上,用户手指按下时形成类似墨水涟漪的视觉效果

    //TouchableWithoutFeedback:不显示任何视觉反馈


    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>

        );
    }

    onPressButton() {
        //Alert.alert('You tapped the button!')
    }

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

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

 

 

index.js

import {AppRegistry} from 'react-native';
import Touchables from './js/Touchables';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => Touchables);