React Native如何處理觸摸事件

在React Native中，處理觸摸事件與在普通的React中處理觸摸事件非常相似。你可以使用TouchableOpacity, TouchableWithoutFeedback或自定義組件來實(shí)現(xiàn)觸摸事件。以下是一些基本示例：

1. 使用TouchableOpacity:

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

const TouchableExample = () => {
  const onPressHandler = () => {
    console.log('TouchableOpacity pressed');
  };

  return (
    <TouchableOpacity onPress={onPressHandler} style={styles.button}>
      <Text style={styles.text}>Click me</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default TouchableExample;

2. 使用TouchableWithoutFeedback:

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

const TouchableExample = () => {
  const onPressHandler = () => {
    console.log('TouchableWithoutFeedback pressed');
  };

  return (
    <TouchableWithoutFeedback onPress={onPressHandler}>
      <Text style={styles.text}>Click me</Text>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  text: {
    color: 'blue',
    fontSize: 16,
  },
});

export default TouchableExample;

3. 自定義觸摸事件處理：

import React, { useState } from 'react';
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native';

const CustomTouchable = ({ onPress }) => {
  const [pressed, setPressed] = useState(false);

  const onPressInHandler = () => {
    setPressed(true);
  };

  const onPressOutHandler = () => {
    setPressed(false);
  };

  return (
    <TouchableNativeFeedback
      onPressIn={onPressInHandler}
      onPressOut={onPressOutHandler}
      activeOpacity={pressed ? 1 : 0.5}
    >
      <View style={[styles.container, pressed && styles.pressedContainer]}>
        <Text style={styles.text}>{pressed ? 'Pressed' : 'Not Pressed'}</Text>
      </View>
    </TouchableNativeFeedback>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    borderRadius: 5,
    backgroundColor: 'blue',
  },
  pressedContainer: {
    backgroundColor: 'red',
  },
  text: {
    color: 'white',
    fontSize: 16,
  },
});

export default CustomTouchable;

這些示例展示了如何在React Native中處理觸摸事件。你可以根據(jù)需要調(diào)整樣式和處理函數(shù)。