React Native - 如何制作边框图像?

IT技术 css reactjs react-native
2021-05-22 14:28:34

我想将边框图像制作为View,类似于css 中的边框图像

我怎么能做到呢?

3个回答

我相信如果你使用 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>

希望能帮助到你!

您可以使用React -native 的ImageBackground组件,并通过在嵌套视图周围添加一些填充来将视图包裹在组件内

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

我会使用包含您的边框作为视图的第一个元素和视图内容的一些填充的图像。

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