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

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

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

它只是说：

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

Answer 2

在滚动时，尝试将$vnetId= "[resourceId("VNetRG",'Microsoft.Network/virtualNetworks', "VNetName")]" $subnetRef = "[concat($vnetId, '/subnets/', "Subnet1")]"上的activeOpacity道具设置为1。用户停止滚动时，请使用默认设置。

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

Answer 3

您可以使用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>

并在this.state.scrollBegin=true

时将activeOpacity={1}设置为TouchableOpacity

Answer 4

只需将值{1传递给activeOpactity道具。

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

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

Answer 5

您可以尝试更改参数 delayPressIn 。 Look doc。

import React from 'react';
import Adapter from 'enzyme-adapter-react-16';
import { shallow, configure, mount } from 'enzyme';
import Audience from '../containers/audience/Audience';

configure({adapter: new Adapter()});

describe('Test case for Audience Component', () => { 
    it('should Audience render correctly', () => {
        const wrapper = shallow(<Audience />);
        expect(wrapper).toMatchSnapshot();
    });
});

Answer 6

我遇到了同样的问题，所以我写了我用的这个类，而不是我的代码中的《 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来防止possible crashes。

享受！

Answer 7

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

滚动时如何禁用TouchableOpacity的突出显示效果？

7 个答案: