react-nativere触摸组件TouchableNativeFeedback

前端之家收集整理的这篇文章主要介绍了react-nativere触摸组件TouchableNativeFeedback前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习交流:https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群:806870562


效果


示例代码

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://www.f2er.com/react/301545.html

猜你在找的React相关文章