React-Native-Video 在 Android 中禁用 TouchableOpacity

Posted 2023-03-10

【中文标题】React-Native-Video 在 Android 中禁用 TouchableOpacity

【英文标题】：React-Native-Video disables TouchableOpacity in Android

【发布时间】：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，看看它是否会起作用。如果没有，请尝试将其移动到其他地方 - 如果它可以工作，那么在它之前捕获触摸事件存在问题。

【参考方案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 转换用于共享元素转换，当我在没有它的情况下运行我的应用程序的先前版本时，一切正常。这个框架似乎在我的视频视图中插入了一些覆盖，这会阻止用户交互。你熟悉这个吗？