react-nativere触摸组件TouchableNativeFeedback

墨蓝 2022-05-24 01:50 100阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![20180518095320916][]

示例代码

import React, { Component } from 'react';
    import {
        StyleSheet,
        View,
        Text,
        Alert,
        TouchableNativeFeedback
    } from 'react-native';
    import TouchableHighlightPage from "./TouchableHighlightPage";
    
    type Props = {};
    export default class TouchableNativeFeedbackPage extends Component<Props> {
        render() {
            return(
                <View style={styles.viewContainer}>
                    <Text style={styles.textStyle}>
                        TouchableNativeFeedbackPage组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。
                    </Text>
                    <TouchableNativeFeedback onPress={() => {
                        Alert.alert("确定按钮")
                    }}>
                        <Text style={styles.touchStyle}>确定</Text>
                    </TouchableNativeFeedback>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        viewContainer:{
            margin:20,
            backgroundColor:"#FFF8DC",
        },
        textStyle:{
            margin:10,
            backgroundColor:"#FFF5EE",
            color:"#FF6347",
        },
        touchStyle:{
            margin:10,
            backgroundColor:"#6495ED",
            width:60,
            height:30,
            textAlign:"center",
            lineHeight:30,
        }
    });

注意事项：

1、只能用于Android平台，iOS平台无效；

2、对组件**TouchableNativeFeedback**设置不了样式，只能对包含其中的其他组件设置样式。

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[20180518095320916]: /images/20220524/0b36b369466943e3a75594113eddcf07.png