20 
<TouchableOpacity style={{ flex: 1 }} >
  <ImageBackground
    source={require('../../images/home.jpg')}>
      <View style={styles.item} collapsable={false}>
        <H3>{contentData[i].name}</H3>
        <Text>{contentData[i].description}</Text>
      </View>
  </ImageBackground>
</TouchableOpacity>

我有一个TouchableOpacity里面的列表ScrollView。我想禁用. TouchableOpacity滚动时，我只想在onPress触发事件时突出显示。因为它可能会使用户混淆它被按下。

4

8 回答 8

30

只需传递activeOpactity值为 1 的 prop。

<TouchableOpacity activeOpacity={1}>....</TouchableOpacity>

确保从“react-native”而不是“react-native-gesture-handler”导入 TouchableOpacity。

于 2019-11-15T10:08:55.347 回答
15

滚动时尝试将activeOpacity道具设置为1。TouchableOpacity当用户停止滚动时使用默认设置。

https://facebook.github.io/react-native/docs/touchableopacity#activeopacity

于 2018-09-20T09:27:35.980 回答
9

您可以尝试更改参数delayPressIn。看文档。

<TouchableOpacity delayPressIn={150} > 
 {children}
</TouchableOpacity>
于 2019-12-23T10:00:06.677 回答
4

您可以尝试在'react-native-gesture-handler'中用RectButton替换TouchOpacity。并且不要忘记将ScrollView导入从'react-native'替换为'react-native-gesture-handler'。

我在这里找到了这个解决方案。

它只是说：

为放置在可滚动容器中的按钮提供本机和平台默认交互（在这种情况下，交互会稍微延迟，以防止按钮在您翻动时突出显示）

于 2020-06-24T08:05:19.333 回答
4

你可以利用onScrollBeginDrag和onScrollEndDrag道具。

 state = {
    scrollBegin: false
  }

  scrollStart = () => this.setState({scrollBegin: true})   
  scrollEnd = () => this.setState({scrollBegin: false})

 <ScrollView onScrollBeginDrag={this.scrollStart} onScrollEndDrag={this.scrollEnd}>
   ... Other stuff
 </ScrollView>

并设置activeOpacity={1}TouchableOpacity 时this.state.scrollBegin=true

于 2018-09-20T09:28:05.073 回答
2

我们使用TouchableOpacity作为 click 元素和一个处理子元素不透明度的包装View实现了一个自定义的Touchable组件。

通过将activeOpacity={1}设置为默认值并将点击时的按下状态设置为 true，我们可以将 onPress 功能的其余部分延迟 100 毫秒，以便在点击时显示不透明度变化。哪个被运送到包装器View。视图被包裹在可触摸的内部而不是外部，以更好地保留样式。

我们还添加了在useEffect()中卸载组件时的清理

import React, { useEffect, useState } from "react";
import { View, TouchableOpacity } from "react-native";


const Touchable = (props) => {

  const { children, onPress } = props;

  const [pressed, setPressed] = useState(false);

  useEffect(() => {
    return setPressed(false);
  }, []);

  return (
      <TouchableOpacity
        {...props}
        activeOpacity={1}
        onPress={() => {
          setPressed(true);
          setTimeout(() => {
            setPressed(false);
            onPress();
          }, 100);
        }}
      >
        <View style={{opacity: pressed ? 0.8 : 1}}>
        {children}
        </View>
      </TouchableOpacity>

  );
};
export default Touchable;
于 2022-02-09T15:25:50.467 回答
1

我遇到了同样的问题，所以我写了这个类，而不是在我的代码中使用 < TouchableOpacity >：

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import TimerMixin from 'react-timer-mixin';

class TouchableOpacityScrollable extends Component {
  _onPress() {
    const { onPress } = this.props;

    // Looking in the TouchableOpacity source code we see that
    // the touch Opacity is 150, and that it comes back in 250 milliseconds.
    // @see https://github.com/facebook/react-native/blob/c416b40542ece64e26fb2298485ae42eeebc352a/Libraries/Components/Touchable/TouchableOpacity.js
    this.refs.touchableOpacity.setOpacityTo(0.2, 150);

    TimerMixin.setTimeout(() => {
      onPress();
      this.refs.touchableOpacity.setOpacityTo(1, 250);
    }, 150);
  }

  render() {
    const { style, children } = this.props;

    return (
      <TouchableOpacity
        ref="touchableOpacity"
        style={style}
        activeOpacity={1.0}
        onPress={() => this._onPress()}
      >
        {children}
      </TouchableOpacity>
    );
  }
}

export default TouchableOpacityScrollable;

您必须安装react-timer-mixin 以防止可能的崩溃。

享受！

于 2019-04-11T15:52:03.177 回答
0

将 RN 版本升级到 0.63.2 后 TouchableOpacity 工作正常，在滚动过程中，不会出现悬停效果

于 2020-09-17T13:35:48.873 回答