这是使用react-native-inviewport的可能解决方案。这种依赖关系只是一个索引文件，其中包含一个组件，该组件在视图位于视口中时具有回调。可以轻松地对其进行修改以满足您的需求。

我构建了一个具有FlatList的非常简单的应用程序。FlatList中的第11项是视频。这意味着当应用程序渲染时，视频不在屏幕上，因此不会播放viddeo，一旦视频完全进入视口，它便应开始播放。

App.js

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';
import VideoPlayer from './VideoPlayer';

export default class App extends React.Component {

  state = {
    data: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
  }

  renderItem = ({item, index}) => {
    if (index === 10) {
      return <VideoPlayer />
    } else {
      return (
        <View style={{height: 100, backgroundColor: '#336699', justifyContent: 'center', alignItems: 'center'}}>
          <Text>{index}</Text>
        </View>
      )
    }
  }
  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

VideoPlayer.js

这是一个包含Video组件的组件。视频包装在InViewPort具有回调功能的组件中。当其所包围的组件完全在视口中时，回调返回true；而当其完全不在视口中时，则返回false。回调调用this.handlePlaying依次调用this.playVideo或this.pauseVideo取决于布尔值。

import React, {Component} from 'react';
import { View, StyleSheet } from 'react-native';
import { Video } from 'expo-av';
import InViewPort from './InViewPort';
//import InViewPort from 'react-native-inviewport; // this wouldn't work in the snack so I just copied the file and added it manually.

export default class VideoPlayer extends React.Component {

  pauseVideo = () => {
    if(this.video) {
      this.video.pauseAsync();
    }
  }

  playVideo = () => {
    if(this.video) {
      this.video.playAsync();
    }
  }

  handlePlaying = (isVisible) => {
    isVisible ? this.playVideo() : this.pauseVideo();
  }

  render() {
      return (
        <View style={styles.container}>
         <InViewPort onChange={this.handlePlaying}>
          <Video
            ref={ref => {this.video = ref}}
            source={{ uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4' }}
            rate={1.0}
            volume={1.0}
            isMuted={false}
            resizeMode="cover"
            shouldPlay
            style={{ width: 300, height: 300 }}
          />
          </InViewPort>
        </View>
      )
  }  
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});

这是显示其工作原理的小吃https://snack.expo.io/@andypandy/video-only-playing-when-in-viewport

我要指出的是，如果视频不是完全在视口中那么就不会玩了。我确信可以进行一些调整，react-native-inviewport以便在部分视口中播放视频（如果您想要的话），或者将视频的高度传递给InViewPort组件。