TouchableOpacity在onPress

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原生社区 Christian Tucker 来管理发现我想要实现的正确方法。

基本上要删除TouchableOpacity呈现的视觉效果，我需要使用TouchableWithoutFeedback，我首先已经知道了。

其次，即使我用TouchableWithoutFeedback替换TouchableOpacity，这个组件结构仍会呈现错误。

• 的LinearGradient
  • TouchableWithoutFeedback

这是正确的方法

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;