スクロール時にTouchableOpacityの強調表示効果を無効にするにはどうすればよいですか？

Question

<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イベントがトリガーされたときにのみ強調表示したいと思います。押されたとユーザーを混乱させる可能性があるためです。

Answer 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 をインストールする必要があります。

楽しい！

Answer 2

ParamdelayPressInを変更してみてください。 ドキュメントを見てください 。

<TouchableOpacity delayPressIn={150} > 
 {children}
</TouchableOpacity>