React-Native-Video在安卓中禁用TouchableOpacity

Question

我正在开发一个react原生应用程序，其中包括一个视频播放器(react- native - video )，以及一些我自己设置的简单控件。在iOS上，这很好用，但在安卓系统上，我用来控制和导航的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是一个呈现pause按钮的函数，Renderer是一个单例组件，包含我在应用程序的更多组件中使用的项目的呈现函数。这一切在iOS上都运行得很好，但在安卓上就不行。react-native-video似乎与react-native-fluid-transitions不兼容，因为当我移除其中之一时，一切都会正常工作。

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>