Question

如何将SVG文件作为组件的背景图像？我已经使用了react-native-svg。

<Container style={{ marginVertical: 150, margin: 20 }}>

        <Svg width="360" height="640" fill="none">
            <Path
                d="M0 0h360v640H0z"
                fill="red"
            />
        </Svg>
</Container>

Answer 1

如果您的用例可行，请将svg保存到文件中，然后将其设置为组件的css Items = (orderByString == "desc" ? w.OrderByDescending(a => a.date) : w.OrderBy(a => a.date)).Select(x => x.AddedDate.ToString()).ToList()。您甚至可以引用svg文件的子组件，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/url()

Answer 2

<View>
    <Svg width="360" height="640" fill="none" style={StyleSheet.absoluteFill}>
        <Path
            d="M0 0h360v640H0z"
            fill="red"
        />
    </Svg>
    {children}
  </View>

由于ImageBackground的实现是这样的，因此该代码可能会起作用。 svg位于背景中，所有子级（组件）都位于前景中。

博览会中的SVG背景

2 个答案: