Прерывание стиля при использовании TouchableOpacity вместо TouchableWithoutFeedback

Вот как эта часть выглядит с помощью TouchableWithoutFeedback

И здесь то же самое, кроме TouchableOpacity

Код для этой части:

<TouchableWithoutFeedback>
    <View style={styles.buyCoinsItem}>
        <View style={styles.cost}>
            <Text>{no_of_coins}</Text>
        </View>
        <Text>{product.priceString}</Text>
        <View style={{height:30, flexDirection: 'row', marginTop:10}}>
            {displayDiscount && 
            <View style={styles.discountContainer}>
                <Text style={styles.whiteText}>Save {discount}</Text>
            </View>
            }
        </View>
    </View>
</TouchableWithoutFeedback>

Что тут происходит?


react-native touchableopacity
person BoredBurrito    schedule 08.01.2018    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Это неприятный побочный эффект реализации двух компонентов.

По сути, TouchableOpacity - это представление с собственной поддержкой, которое поддерживает сенсорное взаимодействие путем вызова setNativeProps({ opacity }) в этом представлении, тогда как TouchableWithoutFeedback просто обертывает собственное представление и присоединяет обработчики касаний.

Чтобы заставить TouchableWithoutFeedback вести себя как TouchableOpacity, вложите в него дополнительный View и определите любые стили в дочернем представлении:

До:

<TouchableOpacity onPress={...} style={styles.touchable}>
  // Touchable content
</TouchableOpacity>

После:

<TouchableWithoutFeedback onPress={...}>
  <View style={styles.touchable}>
    // Touchable content
  </View>
</TouchableWithoutFeedback>

Я не уверен, почему API был спроектирован таким образом - я предполагаю, что нужно избегать создания дополнительного собственного вида резервного копирования по соображениям производительности, когда он не нужен.

Однако с точки зрения рефакторинга это немного затрудняет переход между различными типами сенсорных устройств. В своих проектах я обычно создаю настраиваемый компонент Touchable, который скрывает эту логику за опорой, или использую что-то вроде react-native-platform-touchable, что дает вам эффекты в стиле материала Android на Android.

person jevakallio    schedule 08.01.2018
comment
Спасибо! В этом есть смысл, но что, если я хочу, чтобы мой TouchableOpacity вел себя как TouchableWithoutFeedback? - person BoredBurrito; 09.01.2018

arrow_upward
2
arrow_downward

Nvm, разобрался. Я в основном поменял TouchableOpacity на внешний View. Ну вот так:

<View style={styles.buyCoinsItem}>
    <TouchableOpacity>      
        <View style={styles.cost}>
            <Text>{no_of_coins}</Text>
        </View>
        <Text>{product.priceString}</Text>
        <View style={{height:30, flexDirection: 'row', marginTop:10}}>
            {displayDiscount && 
            <View style={styles.discountContainer}>
                <Text style={styles.whiteText}>Save {discount}</Text>
            </View>
            }
        </View>
    </TouchableOpacity>
</View>
person BoredBurrito    schedule 09.01.2018