是否有 属性 让 Ionicons 有一些媒体反馈?

Is there a property that makes Ionicons have some press feedback?

我在应用程序的某些部分使用了 @expo/vector-icons 中的 Ionicons。我试图确保我的 UI 中的所有 pressable 元素都有某种视觉反馈。我检查了矢量图标 API 并没有找到任何相关属性,但我只是想确保我知道实现此目的的最佳方法。

我的猜测是我必须将所有 <Ionicons /> 包装在 TouchableOpacity 或其类型的其他组件中,而不是 TouchableWithoutFeedback。这个对吗?有没有更直接的方法来实现这一目标?我的建议可行吗?

我认为代码在这里不相关,但无论如何:

import React from 'react'
import { StyleSheet } from 'react-native'
import { Ionicons } from '@expo/vector-icons'
import PropTypes from 'prop-types'

const HeaderIcon = (props) => {
    return (
        <Ionicons
            style={styles.icon}
            name={props.name}
            color={props.color}
            onPress={() => {
                props.onPress()
            }}
        />
    )
}

您可以用 TouchableHighlight

包裹您的图标组件

它有 underlayColor 属性 可以传递颜色的地方。

例如

      <TouchableHighlight onPress={onPress} underlayColor="red">
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>

还有另外两个底层回调onShowUnderlayonHideUnderlay这些回调可以在不同的场景下使用

喜欢onShowUnderlay您可以更改图标颜色或触发任何其他功能。