Javascript 反应本机视频当视频未全屏或离屏时如何暂停视频

我正在使用React Native制作一个Android视频库应用程序，如YouTube，因为我使用的是“React Native video”，在使用该软件包时，我遇到了视频自动播放选项的问题，所有视频都在后台一次播放，而没有观看视频，另一个问题是所有视频

controls={true}

在滚动视频时显示，但它们不会随视频一起移动。我在FlatList中执行所有这些操作 我的代码：

import React, { Component, PropTypes } from "react";
import {
  AppRegistry, Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
  TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions,
  Keyboard, Modal, NativeModules, SafeAreaView, StatusBar, ViewPropTypes,
} from 'react-native';

import Video from 'react-native-video';
export default class HomeScreen extends Component {
 constructor(Props) {
    super(Props);
    this.state = {
      error: null,
      paused: true,
      playing: false,
    };
  }

render() {

    return (
       <View style={styles.container}>
          <View style={styles.tabContent}>
            <FlatList style={styles.list}
              data={this.state.all_Posts}             
              keyExtractor={(data_posts, index) => {
                return data_posts.id.toString();
              }}
              ItemSeparatorComponent={() => {
                return (
                  <View style={styles.separator} />
                )
              }}
              renderItem={(post, id) => {
                const items = post.item;
                return (
                  <View style={styles.card}>

                    <View style={styles.cardHeader}>

                         <View>
                          <Video
                            ref={ref => this.player = ref}
                            source={{ uri: "http://192.168.1.2:3200/" + items.file_Name }}
                            style={{ width: '100%', height: 700 }}
                            resizeMode="cover
                            volume={1.0}
                            controls={true}
                            volume={this.state.volume}
                            muted={this.state.muted}
                            paused={this.state.paused}
                            onLoad={this.onLoad}
                            onBuffer={this.onBuffer}
                            onError={this.videoError}
                            onProgress={this.onProgress}

                          />


                        </View>
                 </View>
               )
              }}
            />
          </View>
        </View>
       )
     }
}

从“React”导入React，{Component，PropTypes}；
进口{
AppRegistry、图像、平台、样式表、文本、视图、文本输入、按钮、可触摸突出显示、警报、，
TouchableOpacity、ScrollView、ColorPropType、平面列表、截面列表、尺寸、，
键盘、模态、本机模块、安全区域视图、状态栏、ViewPropType、，
}从“反应本机”；
从“react native Video”导入视频；
导出默认类主屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
是的，
玩：错，
};
}
render（）{
返回(
{
返回数据_posts.id.toString（）；
}}
ItemSeparatorComponent={（）=>{
返回(
)
}}
renderItem={（post，id）=>{
const items=post.item；
返回(
this.player=ref}
源={{uri:“http://192.168.1.2:3200/“+items.file_Name}”
样式={{宽度：100%，高度：700}
resizeMode=“封面
卷={1.0}
控件={true}
卷={this.state.volume}
muted={this.state.muted}
暂停={this.state.paused}
onLoad={this.onLoad}
onBuffer={this.onBuffer}
onError={this.videoError}
onProgress={this.onProgress}
/>
)
}}
/>
)
}
}

一旦清楚地检查代码，并告诉我如何仅在用户观看视频时播放该视频，并且在剩余时间内它处于暂停模式。并且视频

controls={true}

需要随视频一起移动或隐藏。因此，请帮助我找到这两个问题的解决方案。

您可以使用自定义视频控件所需的一切。它只需操作视频控件

它的用法也很简单：

import MediaControls, { PLAYER_STATES } from 'react-native-media-controls';

  render() {
    return (
      <View style={styles.container}>
        <Video
          volume={0.0}
          resizeMode="cover"
          onEnd={this.onEnd}
          onLoad={this.onLoad}
          paused={this.state.paused}
          style={styles.mediaPlayer}
          onProgress={this.onProgress}
          onLoadStart={this.onLoadStart}
          ref={videoPlayer => (this.videoPlayer = videoPlayer)}
          source={{ uri: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
        />
        <MediaControls
          mainColor="orange"
          onSeek={this.onSeek}
          onReplay={this.onReplay}
          onPaused={this.onPaused}
          onSeeking={this.onSeeking}
          duration={this.state.duration}
          toolbar={this.renderToolbar()}
          isLoading={this.state.isLoading}
          onFullScreen={this.onFullScreen}
          progress={this.state.currentTime}
          playerState={this.state.playerState}
        />
      </View>
    );
  }

导入媒体控件，{PLAYER_STATES}来自“react native media controls”；
render（）{
返回(
（this.videoPlayer=videoPlayer）}
source={{uri:'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' }}
/>
);
}

这是一个原始的叉子，因为他没有主动维护库，所以我继续使用他的叉子

---

我相信这个库会解决您的问题。

任何人都知道解决方案……先生，谢谢您重播@FreakyCoder``导入媒体控件，{PLAYER_STATES}“react native media controls”中的“react native media controls”；“它不受支持，因为它在过去两年中没有任何更新，所以我正在寻找使用react native video package的代码，您是否有任何其他建议它将与react native video集成，您不需要自己操作rn video，但我遇到了错误，我是alrea。”dy尝试了原始软件包也反应本机媒体控件导入媒体控件，{PLAYER_STATES}来自“反应本机媒体控件”；我已经在我的软件包上修复和开发了很多东西，为什么不试试呢？获取错误，如类型错误：this3.renderToolbar不是一个函数this.renderToolbar（）未定义