美文网首页
react-native 点击事件

react-native 点击事件

作者: 暴躁程序员 | 来源:发表于2023-11-13 15:11 被阅读0次

react-native 的绑定事件方式与web不同,View 和 Text组件无法绑定点击事件
只能通过专门的事件组件TouchableWithoutFeedbackTouchableOpacityTouchableHighlight 来绑定点击事件

1. TouchableWithoutFeedback     点击无特效
2. TouchableOpacity             点击透明
3. TouchableHighlight           点击高亮

示例

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TouchableOpacity,
  TouchableWithoutFeedback,
} from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback
        onPress={() => {
          console.log('只有点击');
        }}>
        <Text style={[styles.btn, styles.btn2]}> 只有点击 </Text>
      </TouchableWithoutFeedback>
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => {
          console.log('点击半透明');
        }}>
        <Text style={[styles.btn, styles.btn1]}> 点击透明 </Text>
      </TouchableOpacity>
      <TouchableHighlight
        activeOpacity={0.85}
        underlayColor="#DDDDDD"
        onPress={() => {
          console.log('点击高亮');
        }}>
        <Text style={styles.btn}> 点击高亮一整行 </Text>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  btn: {
    height: 45,
    width: 120,
    backgroundColor: '#738998',
    color: '#fff',
    fontSize: 18,
    textAlign: 'center',
    textAlignVertical: 'center',
    includeFontPadding: false,
  },
  btn1: {
    backgroundColor: '#782484',
  },
  btn2: {
    backgroundColor: '#245367',
  },
});

export default App;

相关文章

网友评论

      本文标题:react-native 点击事件

      本文链接:https://www.haomeiwen.com/subject/nqldwdtx.html