是否有 属性 让 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>
还有另外两个底层回调onShowUnderlay
和onHideUnderlay
这些回调可以在不同的场景下使用
喜欢onShowUnderlay
您可以更改图标颜色或触发任何其他功能。
我在应用程序的某些部分使用了 @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>
还有另外两个底层回调onShowUnderlay
和onHideUnderlay
这些回调可以在不同的场景下使用
喜欢onShowUnderlay
您可以更改图标颜色或触发任何其他功能。