Блог

Главная - Вопросы по программированию - SVG-фон в expo

SVG-фон в expo

#javascript #react-native #svg #expo

#javascript #react-native #svg #выставка

Вопрос:

как я могу сделать свой 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>

Ответ №1:

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

Возможно, этот код будет работать, поскольку реализация ImageBackground выглядит следующим образом. svg находится в фоновом режиме, а все дочерние элементы (компоненты) будут на переднем плане.

Комментарии:

1. Привет, спасибо за ответ, но как я могу удалить атрибут fill и просто использовать мой svg-файл?

2. Я думаю, что это проблема с вашим компонентом path. Я просто вижу прямоугольник, когда использую ваш path с конкретным общим реквизитом

Ответ №2:

Если это возможно для вашего варианта использования, сохраните свой svg в файл, затем вы можете установить его в качестве css background-image: url(<file>.svg); вашего компонента. Вы даже можете ссылаться на подкомпоненты svg-файла, см.https://developer.mozilla.org/en-US/docs/Web/CSS/url ()

Комментарии:

1. css-код background-url не поддерживается react-native.