如果我尝试在React Native中使用flex，则Svg元素不会显示在ScrollView中

我想要一个页面，上面有一个Svg图形，下面有一些文字解释它。文本很长，因此页面必须能够滚动。当我在Svg元素上使用固定的宽度和高度时，它可以工作，但我想使用flex

这是一个简单的矩形而不是图形的示例。Svg矩形不显示：

import React, { Component } from "react";
import { StyleSheet, View, Text, ScrollView} from "react-native";
import Svg,{  Rect} from 'react-native-svg';

export default class MyScreen extends Component {
  render() {
    return (
      <ScrollView style={{flex:1}}>
      <View style={{flex:1}}>
       <Svg style={{flex:1,alignSelf: 'stretch'}} viewBox='0 0 300 200'>
            <Rect x={10} y={10} height={180} width={280} stroke="#000" fill='none' />  
        </Svg>
      </View>
      <View style={{flex:1}}>
            <Text>Very long text that does not fit on one screen...
            </Text> 
    </View>
    </ScrollView>
    );
  }
}

import React，{Component}来自“React”；
从“react native”导入{样式表、视图、文本、滚动视图}；
从'react native Svg'导入Svg，{Rect}；
导出默认类MyScreen扩展组件{
render（）{
返回(
很长的文本不能在一个屏幕上显示。。。
);
}
}

---

搜索时，我会在ScrollView中找到使用contentContainerStyle={{flex:1}}而不是style={{flex:1}}的建议。当我尝试此操作时，会显示Svg元素，但是最终出现在屏幕之外的文本也会出现在scrollview之外。您可以看到文本，但当您尝试滚动到它时，scrollview会反弹。注意。你需要一个长文本来重现这种效果

Flexbox布局和滚动视图总是有点棘手，因为如果你考虑Flexbox本身，它试图同时相对于高度和宽度定位元素。在滚动视图中，高度不应为100%。此外，不需要

和

周围的

组件

因此，在您的情况下，我将尝试删除Scrollview中的所有flex样式，并将其替换为

Dimensions.get（“windows”）.width

。你也可以用同样的高度。这里有一个我在世博会上摆弄过的小例子，请试一试

---

编辑：今天找到了一篇关于你的问题的文章，也许你可以试一试：

谢谢你提供了一个很好的例子。使用Dimensions.get（“window”）.width可以很好地工作，但不幸的是，当我在横向和纵向之间切换时，宽度不会像使用flex时那样自动更新。这就是我一直想使用flex的原因。我开始使用维度。。。然后我用“反应本地方向”来处理方向的变化。这是可行的，但当图形重新渲染时，我得到了性能的提高。也许你可以尝试摆弄宽度：“100%”，或者看看我在回答中添加的文章。