TouchableHighlight无点击效果

转载于:https://www.jianshu.com/p/2245cc5e4a82

在RN中,如果想给列表视图的项添加点击效果, 可以使用TouchableHighlight控件. 但是要注意此控件一定要有onPress属性, 不然点击没有任何效果

renderMovieList = (movie) => {
    return(
      <TouchableHighlight 
      underlayColor="rgba(34, 26, 38, 0.1)" 
      //注意此处 实现了onPress属性
      onPress={()=>{
        console.log(`<<  ${movie.item.title}  >> 被点了`);
      }}
      >
        <View style={styles.item}>
          <View style={styles.itemImage}>
            <Image 
            source={{uri: movie.item.images.large}}
            style={styles.image}
            />
          </View>
        </View>
      </TouchableHighlight>
    );
  }

如果不需要有什么操作, 可以直接给onPress一个空的函数实现

onPress={()=>{}}


作者:Oo晨晨oO
链接:https://www.jianshu.com/p/175cc21ecba3
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

<think>好的,用户现在问的是如何设置点击的背景颜色。之前他们问过如何去除点击效果,特别是默认阴影,现在可能是在调整了点击效果之后,想要自定义点击时的背景颜色。我需要先回顾之前的回答,确保这次的回答在逻辑上连贯,并且没有重复的信息。 首先,用户可能是在使用React Native开发应用,因为之前的回答中提到了TouchableWithoutFeedback和TouchableOpacity这些React Native的组件。所以这次应该继续基于React Native来回答。 接下来,用户的需求是设置点击的背景颜色,这可能涉及到不同平台的实现方式。例如,Android使用涟漪效果,而iOS可能使用透明度变化,Web可能有hover状态。需要分别针对不同平台给出解决方案。 在之前的回答中,已经提到了使用TouchableWithoutFeedback和activeOpacity来去除点击效果,现在需要调整这些组件的属性来自定义背景颜色。例如,对于Android,可能需要设置rippleColor属性,而对于iOS可能需要覆盖点击时的样式。 另外,用户可能需要示例代码,所以需要提供具体的代码片段,说明如何在不同平台或通用情况下设置背景颜色。还要注意是否需要处理按压状态,比如使用state参数来动态改变样式。 还要考虑用户是否可能在使用其他库,比如React Navigation的底部导航栏,这时候可能需要结合screenOptions和tabBarButton来设置点击效果。 需要注意检查是否有遗漏的平台,比如Web端的:hover伪类,或者是否需要在样式中使用Platform.select来区分平台。 最后,确保回答结构清晰,分点说明,可能包括基础方案、平台适配、动态效果、示例代码等部分,帮助用户逐步实现自定义点击背景颜色的效果。同时提醒用户进行真机测试,确保效果符合预期。</think>--- ### 一、基础实现方案(React Native) #### 1. 使用 `TouchableOpacity` 设置点击背景 ```javascript <TouchableOpacity activeOpacity={0.8} // 点击时透明度(0-1) style={{ backgroundColor: '#3498db' }} // 默认背景色 underlayColor="#2980b9" // 点击时背景色(仅限部分组件) > <Text>按钮</Text> </TouchableOpacity> ``` #### 2. 使用 `Pressable` 控制按压状态 ```javascript <Pressable style={({ pressed }) => [ { backgroundColor: pressed ? '#e74c3c' : '#c0392b', // 按压时变深红色 padding: 12 } ]} > <Text>动态变色按钮</Text> </Pressable> ``` --- ### 二、平台特性适配方案 #### Android 涟漪效果定制 ```javascript import { TouchableNativeFeedback } from 'react-native'; // 自定义涟漪效果 <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple( 'rgba(255,255,255,0.3)', // 涟漪颜色 true // 是否包含边框波纹 )} > <View style={{ backgroundColor: '#2ecc71', padding: 16 }}> <Text>Android专用按钮</Text> </View> </TouchableNativeFeedback> ``` #### iOS 点击状态管理 ```javascript <TouchableHighlight underlayColor="#f1c40f" // 点击高亮色 activeOpacity={0.9} // 配合透明度使用 style={{ backgroundColor: '#f39c12' }} > <Text>iOS专用按钮</Text> </TouchableHighlight> ``` --- ### 三、高级动态效果实现 #### 1. 渐变背景动画 ```javascript import { interpolateColor, useAnimatedStyle } from 'react-native-reanimated'; const animatedStyle = useAnimatedStyle(() => ({ backgroundColor: interpolateColor( progress.value, [0, 1], ['#9b59b6', '#8e44ad'] // 从浅紫色到深紫色渐变 ) })); ``` #### 2. 点击波纹扩散效果 ```javascript <View style={{ overflow: 'hidden' }}> <TouchableWithoutFeedback onPressIn={() => { /* 触发动画开始 */ }} onPressOut={() => { /* 触发动画结束 */ }} > <Animated.View style={[styles.button, rippleStyle]} /> </TouchableWithoutFeedback> </View> ``` --- ### 四、React Navigation 导航栏专用配置 #### 底部导航栏点击色设置 ```javascript <Tab.Navigator screenOptions={{ tabBarActiveTintColor: '#e67e22', // 选中颜色 tabBarInactiveTintColor: '#95a5a6', // 未选中颜色 tabBarButton: (props) => ( <TouchableOpacity {...props} activeOpacity={0.7} // 点击透明度 style={{ backgroundColor: props.accessibilityState?.selected ? '#2c3e50' // 选中时背景色 : '#ecf0f1' // 默认背景色 }} /> ) }} > ``` --- ### 五、
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值