React Native - как сделать изображение границы?

Ответ 1

Я считаю, что если вы используете Styled Components (https://www.styled-components.com/), вы можете установить его непосредственно с помощью CSS. Это будет примерно так:

import styled from 'styled-components/native';

const StyledView = styled.View'
  border-image: <your definition here>;
';

И тогда просто используйте его, как вы всегда:

<StyledView>

</StyledView>

Надеюсь, поможет!

Ответ 2

Я бы пошел с изображением, которое содержит вашу границу, как первый элемент вашего представления, и некоторое дополнение к содержимому представления.

<Image
        style={{
          backgroundColor: '#ccc',
          position: 'absolute',
          width: '100%',
          height: '100%',
          justifyContent: 'center'
        }}
        source={{ uri: 'path/to/your/image/of/border' }}
>

<Text
          style={{
            backgroundColor: 'transparent',
            textAlign: 'center',
            fontSize: 30,
            padding: 40,
          }}
        >
          {text}
</Text>

Ответ 3

Вы можете использовать компонент ImageBackground для реагирования-native и обернуть свой вид внутри компонента, добавив немного дополнений вокруг вашего вложенного представления

<ImageBackground source={imageSource}>
 <Text style={{padding:20}}> Inside </Text>
</ImageBackground>