学习交流: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设置不了样式,只能对包含其中的其他组件设置样式。