React-Native-Video 在 Android 中禁用 TouchableOpacity答案

【问题标题】：React-Native-Video disables TouchableOpacity in AndroidReact-Native-Video 在 Android 中禁用 TouchableOpacity
【发布时间】：2019-05-29 03:56:18
【问题描述】：

我正在开发一个 react native 应用程序，它涉及一个视频播放器 (react-native-video)，以及我自己设置的一些简单控件。在 iOS 上这工作正常，但在 Android 上，我用于控制和导航的 TouchableOpacity 元素似乎没有检测到触摸。（导航由我的应用程序中的 react-native-fluid-transitions 处理）。当我打开检查器时，屏幕覆盖视图似乎位于我的控件之上。但是，iOS 上不是这种情况，我也没有配置这样的视图。

我安装 Atom 是为了使用它的检查器功能来查看我的视图的实际顺序。它看起来如下：

VideoView 是我的组件的名称，Video 是实际的视频播放器，我突出显示的 TouchableOpacity 是我要开始工作的按钮。在这个视图层次结构中，似乎没有任何视图位于任何东西之上。我还将此故障与我的按钮实际工作的其他组件进行了比较，并且看起来相同。

我的代码如下：

return (
      <View style={internalStyles.container}>
        <Video style={internalStyles.videoContainer}
            ref={(ref) => {
             this.props.player = ref
            }}
            source={{uri: url}}
            controls={false}
            onEnd={() => this.videoEnded()}
            paused={this.state.paused}
            muted={false}
            repeat={false}
            resizeMode={"contain"}
            volume={1.0}
            rate={1.0}
            ignoreSilentSwitch={"obey"}
          />              
        {this.renderControls()}
        {Renderer.getInstance().renderNavigationButton()}
      </View>
  );

其中 renderControls 是一个渲染暂停按钮的函数，而 Renderer 是一个单例组件，其中包含我在应用程序的更多组件中使用的项目的渲染函数。这一切在 iOS 上都可以正常工作，但在 Android 上却不行。 react-native-video 似乎与 react-native-fluid-transitions 不兼容，因为当我删除其中一个时一切正常。

有谁知道可能导致这种行为的原因吗？任何帮助将不胜感激。

【问题讨论】：

如果绝对定位，那么它可能会产生类似的问题。尝试为它设置更高的 z-index。
我的 zIndex 最高为 6000，远高于我的任何其他视图。您还有其他想法吗？
这个视图是由我所知道的自动反应原生创建的，所以你不需要关注它。尝试将 TouchableOpacity 替换为另一个 touchable，看看它是否会起作用。如果没有，请尝试将其移动到其他地方 - 如果它可以工作，那么在它之前捕获触摸事件存在问题。

标签： android react-native touchableopacity react-native-video

【解决方案1】：

尝试从 TouchableOpacity 组件中移除 activeOpacity 属性。或者您可以使用特定于平台的代码来设置 activeOpacity 属性的值

import { Platform, TouchableOpacity } from 'react-native'

    <TouchableOpacity 
      activeOpacity={Platform.OS==='android' ? 0 : 0.2}
      >
      <Text>submit</Text>
    </TouchableOpacity>

【讨论】：

【解决方案2】：

将组件包装在视图中并禁用指针事件。

<View pointerEvents="none">
  <Video source={{ uri: source }} />
</View>

【讨论】：

这对我有用！我无法使用常规的 react-native-video 和可触摸来重现该问题。但不知何故，在我目前的情况下，它只是第二次检测到触摸。真的很奇怪。你知道为什么这有效吗？不知道为什么我的视频会检测到触摸...

【解决方案3】：

import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>

【讨论】：

感谢您的回答，但在实现 TouchableOpacity 时不会遇到问题，因为它适用于其他组件。它只是当前似乎被禁用的“上下文”
点击后会褪色吗？
不，它确实没有检测到触摸
嗨！我实际上有一个更新（见我的问题）。我将 react-native-fluid 转换用于共享元素转换，当我在没有它的情况下运行我的应用程序的先前版本时，一切正常。这个框架似乎在我的视频视图中插入了一些覆盖，这会阻止用户交互。你熟悉这个吗？