1

重现步骤

开始一个全新的 react-native 项目

有了这个 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 中的视频组件似乎破坏了布局。

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

我今天制作了一个视频，介绍了一种奇怪的方法来消除错误，直到下一个全屏。还有一个bug的演示： https ://youtu.be/tYxY1WJkuO8

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

从贡献者的角度来看，此错误与 onLayout 有关，请参见下文：

通常当视图的 flex=1 时调用 onLayout。这继续适用于视图和全屏，但是，当涉及 ScrollView 时，退出全屏会阻止 flex=1 触发 onLayout 更改，从而导致布局不正确。这似乎是 React 代码中更深层次的渲染问题；

那我为什么会在这里？因为我自己无法让它发挥作用，我正在寻找一种解决方法或经验丰富的专家，并找到一种让它发挥作用的方法。也许也为这个很棒的软件包做出贡献。

4

0 回答 0