css - TouchableOpacity 在 onPress 期间隐藏 View 的内容

Question

我正在尝试创建一个看起来像这样的按钮组件。

TouchableOpacity 组件被包裹在一个 LinearGradient 组件中。当我触摸按钮时，内部视图的星星具有非常低的不透明度。我知道这是 TouchableOpacity 的功能之一，但有没有办法禁用它？

我玩过道具activeOpacity和focusOpacity但它仍然渲染不正确。

这是代码

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

import LinearGradient from 'react-native-linear-gradient';

import em from './../../styles/calculateSize';

const deviceWidth = Dimensions.get('window').width;

const GradientButton = ({ propStyle, buttonText, onPress }) => {
  const { centerEverything, buttonGradientStyle, buttonStyle, buttonTextStyle } = styles;
  return (
    <LinearGradient colors={['#FF7676', '#F54EA2']} style={[buttonGradientStyle, centerEverything]}>
      <TouchableOpacity 
        style={[buttonStyle, centerEverything]} 
        activeOpacity={1} 
        focusedOpacity={1}
        onPress={onPress}>
        <Text style={buttonTextStyle}>{buttonText}</Text>
      </TouchableOpacity>
    </LinearGradient>
  );
}

const styles = {
  centerEverything: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonGradientStyle: {
    height: 27,
    width: deviceWidth * 0.23,
    borderRadius: 5,
    marginLeft: 5
  },
  buttonStyle: {
    height: 24,
    width: deviceWidth * 0.23 - 3,
    backgroundColor: '#fff',
    opacity: 0.1,
    justifyContent: 'center',
    borderRadius: 3,
  },
  buttonTextStyle: {
    fontSize: em(0.75),
    color: '#F54EA2',
    backgroundColor: 'transparent',
  }
}

export { GradientButton };

Answer 1

感谢Facebook React Native 社区的Christian Tucker，我设法找到了我在这里尝试实现的正确方法。

从本质上讲，为了消除 TouchableOpacity 呈现的视觉效果，我需要使用 TouchableWithoutFeedback，我一开始就已经知道了。

其次，即使我将 TouchableOpacity 替换为 TouchableWithoutFeedback，此组件结构仍会出现错误。

• 线性渐变
  • TouchableWithoutFeedback

这是正确的做法

return (
    <TouchableWithoutFeedback onPress={onPress}>
      <LinearGradient colors={['#FF7676', '#F54EA2']} style={[buttonGradientStyle, centerEverything]}>
        <View style={[buttonStyle, centerEverything]} >
          <Text style={buttonTextStyle}>{buttonText}</Text>
        </View>
      </LinearGradient>
    </TouchableWithoutFeedback>
  );