React Native Touchables 组件(1)

📌 相关文章

📜 React Native Touchables 组件(1)

📅 最后修改于: 2023-12-03 14:46:56.977000 🧑 作者: Mango

React Native Touchables 组件

React Native Touchables组件是React Native的核心组件之一，它提供了一套可触摸的组件集合，其中包括TouchableWithoutFeedback、TouchableHighlight、TouchableOpacity和TouchableNativeFeedback等组件，可以用来创建可交互的用户界面。

特点

可以添加点击或触摸事件处理函数。
可以控制按下时和释放时的样式以及行为。
在不同的平台上，提供了不同的触摸反馈效果。

组件列表

TouchableWithoutFeedback: 可以在没有任何触摸反馈的情况下检测触摸事件的组件。
TouchableOpacity: 带有触摸反馈的不透明度降低的组件。
TouchableHighlight: 带有触摸反馈的高亮显示的组件。
TouchableNativeFeedback: 只支持Android平台，带有触摸反馈的涟漪效果的组件。

用法

使用TouchableWithoutFeedback来检测触摸事件

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

class App extends Component {
  state = {
    count: 0
  }

  handlePress = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <TouchableWithoutFeedback onPress={this.handlePress}>
        <Text>
          You clicked {this.state.count} times
        </Text>
      </TouchableWithoutFeedback>
    );
  }
}

export default App;

使用TouchableOpacity来添加触摸反馈

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

class App extends Component {
  state = {
    count: 0
  }

  handlePress = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <TouchableOpacity onPress={this.handlePress}>
        <Text>
          Click me
        </Text>
      </TouchableOpacity>
    );
  }
}

export default App;

使用TouchableHighlight来添加高亮效果

import React, { Component } from 'react';
import { TouchableHighlight, Text } from 'react-native';

class App extends Component {
  state = {
    count: 0
  }

  handlePress = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <TouchableHighlight onPress={this.handlePress}>
        <Text>
          Click me
        </Text>
      </TouchableHighlight>
    );
  }
}

export default App;

使用TouchableNativeFeedback来添加涟漪效果

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

class App extends Component {
  state = {
    count: 0
  }

  handlePress = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <TouchableNativeFeedback onPress={this.handlePress} background={TouchableNativeFeedback.Ripple('#ffffff', false)}>
        <View>
          <Text>
            Click me
          </Text>
        </View>
      </TouchableNativeFeedback>
    );
  }
}

export default App;