0

我正在开发一个 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 不兼容，因为当我删除其中一个时一切正常。

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

4

3 回答 3

1

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

<View pointerEvents="none">
  <Video source={{ uri: source }} />
</View>
于 2020-06-04T05:38:41.897 回答
1

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

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

    <TouchableOpacity 
      activeOpacity={Platform.OS==='android' ? 0 : 0.2}
      >
      <Text>submit</Text>
    </TouchableOpacity>
于 2019-01-02T16:53:26.310 回答
0 
import {TouchableOpacity} from 'react-native';

<TouchableOpacity>some text</TouchableOpacity>
于 2019-01-02T14:24:30.550 回答