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

Question

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

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

我已经使用了 Prop 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>
  );