复制步骤

Question

复制步骤

开始一个新的本机项目

使用此package.json

    {
      "name": "verifCamera4",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
      },
      "dependencies": {
        "react": "16.8.3",
        "react-native": "0.59.8",
        "react-native-video": "git+https://github.com/nfb-onf/react-native-video.git#master"
      },
      "devDependencies": {
        "@babel/core": "^7.4.5",
        "@babel/runtime": "^7.4.5",
        "babel-jest": "^24.8.0",
        "jest": "^24.8.0",
        "metro-react-native-babel-preset": "^0.54.1",
        "react-test-renderer": "16.8.3"
      },
      "jest": {
        "preset": "react-native"
      }
    }

然后使用此代码段，您可以重现错误：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, ScrollView, StyleSheet, Text, View} from 'react-native';
import Video from "react-native-video";

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Text style={styles.instructions}>To get started, edit App.js</Text>
          <Text style={styles.instructions}>{instructions}</Text>

          <View style={{flex:1, flexDirection: "row"}}>
            <Video controls
                   source={{uri: "https://app.dollycast.io/films/102/maestro_product-1551264704/movie_maestro_product-1551264704_1.mp4"}}
                   style={{borderWidth: 1, width:300, height: 300}}/>
          </View>
          <Text style={styles.welcome}>Welcome to React Native!</Text>
          <Text style={styles.instructions}>To get started, edit App.js</Text>
          <Text style={styles.instructions}>{instructions}</Text>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

要重现此内容，您必须：

启动应用程序。
加载应用屏幕后，启动视频
然后全屏显示
旋转设备以横向或纵向
关闭全屏
现在有问题，布局已损坏。

ScrollView内部的视频组件似乎破坏了布局。

维护者仓库中已经两次报告了此问题，但是即使贡献者回答了问题，他们也无法在几个月内解决此问题。

我今天制作了一段视频，讲述了一种怪异的方法来消除该错误，直到下一个全屏显示为止。该错误也有一个演示： https://youtu.be/tYxY1WJkuO8

如果您想了解更多有关此错误的信息，可以转到由贡献者here和here参与的报告的两个问题

来自贡献者的此错误与onLayout有关，请参见下文：

通常，当视图的flex = 1时，将调用onLayout。这继续可以在视图和全屏模式下使用ScrollView 涉及到，退出全屏会阻止flex = 1触发 onLayout更改，这导致布局不正确。它似乎成为React代码中更深层的渲染问题；

那我为什么在这里？因为我无法自己解决这个问题，所以我正在寻找解决方法或经验丰富的专家，并找到使之可行的方法。也许也为这个超赞的包做出了贡献。

反应本机视频：退出时，iOS上的全屏显示中断布局

复制步骤

0 个答案: