react-nativere触摸组件TouchableNativeFeedback

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

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

react-native学习交流QQ群:806870562


效果


示例代码

  1. import React,{ Component } from 'react';
  2. import {
  3. StyleSheet,View,Text,Alert,TouchableNativeFeedback
  4. } from 'react-native';
  5. import TouchableHighlightPage from "./TouchableHighlightPage";
  6.  
  7. type Props = {};
  8. export default class TouchableNativeFeedbackPage extends Component<Props> {
  9. render() {
  10. return(
  11. <View style={styles.viewContainer}>
  12. <Text style={styles.textStyle}>
  13. TouchableNativeFeedbackPage组件用于封装视图,使其可以正确响应触摸操作(仅限Android平台)。在Android设备上,这个组件利用原生状态来渲染触摸的反馈。
  14. </Text>
  15. <TouchableNativeFeedback onPress={() => {
  16. Alert.alert("确定按钮")
  17. }}>
  18. <Text style={styles.touchStyle}>确定</Text>
  19. </TouchableNativeFeedback>
  20. </View>
  21. );
  22. }
  23. }
  24.  
  25. const styles = StyleSheet.create({
  26. viewContainer:{
  27. margin:20,backgroundColor:"#FFF8DC",},textStyle:{
  28. margin:10,backgroundColor:"#FFF5EE",color:"#FF6347",touchStyle:{
  29. margin:10,backgroundColor:"#6495ED",width:60,height:30,textAlign:"center",lineHeight:30,}
  30. });

注意事项:

1、只能用于Android平台,iOS平台无效;

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

猜你在找的React相关文章