2

在网络上，塑造 TouchableOpacity 使其只有形状是可点击的，但在移动设备上，围绕形状的整个“框”都是可点击的。有什么办法可以让它只有形状是可点击的？

我尝试塑造视图并将 View 和 TouchableOpacity 上的样式设置为溢出：'隐藏'，但这也无法包含可触摸的区域。

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

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

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={this.onPress}>
          <Text> Touch Here </Text>
        </TouchableOpacity>
        <View style={[styles.countContainer]}>
          <Text style={[styles.countText]}>
            {this.state.count !== 0 ? this.state.count : null}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
    overflow: 'hidden',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    borderRadius: 640,
    height: 320,
    width: 320,
    overflow: 'hidden',
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
  countText: {
    color: '#FF00FF',
  },
});

这是我的问题的小吃示例

4

0 回答 0