Question

我想要一个顶部带有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>
    );
  }
}

当我搜索时，我发现在ScrollView中使用contentContainerStyle = {{flex：1}}而不是style = {{flex：1}}的建议。当我尝试这个时，会显示Svg元素但是，最后在屏幕外面的文本也在滚动视图之外。您可以看到文本，但滚动视图会在您尝试滚动时反弹回来。注意。您需要一个长文本来重现此效果。

Answer 1

Flexbox-Layouts和Scrollviews总是有点棘手，因为如果你考虑一下flexbox本身，它会尝试相对于高度和宽度同时定位元素。在ScrollView中，高度不应为100％。此外，不需要<View>和<Text>周围的<Svg> - 组件。

因此，在您的情况下，我会尝试删除Scrollview中的所有flex样式，并将其替换为Dimensions.get("windows").width。你可以用高度做同样的事情。这是我在世博会上摆弄的一个小例子，所以试一试。

Expo Example

编辑：今天发现一篇关于你的问题的文章，也许你可以试一试：Medium Article

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

1 个答案: