TouchableOpacity 在 onPress 期间隐藏 View 的内容

Question

我正在尝试创建一个如下所示的按钮组件。

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

我已经玩过道具 activeOpacity 和 focusedOpacity 但它仍然无法正常渲染。

这是代码

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>
  );

TouchableOpacity 在 onPress 期间隐藏 View 的内容

TouchableOpacity hides the content of a View during onPress

css

react-native

touchableopacity