Как отключить эффект подсветки TouchableOpacity при прокрутке? - PullRequest
Новая
       20

Как отключить эффект подсветки TouchableOpacity при прокрутке?

0 голосов
/ 20 сентября 2018 
<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.Потому что это может сбить пользователя с толку, что он нажал.

Ответы [ 3 ]

0 голосов
/ 20 сентября 2018

Вы можете использовать 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

0 голосов
/ 11 апреля 2019

У меня была та же проблема, поэтому я написал этот класс, который я использую вместо <<strong> 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;

Вам нужно будет установить реагировать-timer-mixin для предотвращения возможных сбоев .

Наслаждайтесь!

0 голосов
/ 20 сентября 2018

Попробуйте установить activeOpacity опору на TouchableOpacity в 1 при прокрутке.Используйте настройки по умолчанию, когда пользователь прекращает прокрутку.

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

...