Question

我正在开发一个反应本机应用程序，其中涉及一个视频播放器（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-transition不兼容，因为当我删除其中任何一个时，一切都可以正常工作。

有人知道什么可能导致这种现象吗？任何帮助将不胜感激。

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

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

Answer 3

import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>

React-Native-Video在Android中禁用了TouchableOpacity

3 个答案: