TouchableOpacity скрывает содержимое View во время onPress

Я пытаюсь создать компонент кнопки, который выглядит так.

введите здесь описание изображения

Компонент 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 };


react-native css touchableopacity
person J.Doe    schedule 21.04.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Благодаря Кристиану Такеру в сообществе React Native на Facebook мне удалось обнаружить правильный метод того, чего я пытаюсь добиться.

По сути, чтобы удалить визуальный эффект TouchableOpacity, мне нужно использовать TouchableWithoutFeedback, о котором я уже знал в первую очередь.

Во-вторых, эта структура компонентов по-прежнему будет отображать ошибку, даже если я заменю TouchableOpacity на TouchableWithoutFeedback.

  • LinearGradient
    • TouchableWithoutFeedback

Это правильный подход

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

person J.Doe    schedule 21.04.2017