React Native 可触摸组件基础知识

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 
export default class TouchableComponent extends Component {
  handlePress = () => {
    // 处理点击事件
    console.log('按钮被点击了!');
  };
 
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.handlePress}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>点击我</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#f0f0f0',
    width: 160,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 16,
  },
});

这段代码创建了一个名为TouchableComponent的React组件，它使用了TouchableOpacity组件来创建一个可点击的按钮。当按钮被点击时，控制台会输出一条消息。同时，它展示了如何使用StyleSheet.create来定义组件的样式，这是React Native开发中一个常用的模式。