React Native - how to make a border image?

问题

I want to make a border image to a View , similar to border-image in the css.

How could I achieve it ?

回答1:

I believe that if you use Styled Components (https://www.styled-components.com/) you can set it with CSS directly. It will be something like this:

import styled from 'styled-components/native';

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

And then simply use it like you always do:

<StyledView>

</StyledView>

Hope it helps!

回答2:

You can use ImageBackground component of react-native and wrap your view inside component by adding some padding around your nested view

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

回答3:

I would go with an image that contains your border as the first element of your view and some padding on the contents of the view.

<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>

来源：https://stackoverflow.com/questions/50343640/react-native-how-to-make-a-border-image