Question

我想将边框图像设为View，类似于css中的border-image。

我怎么能实现它？

Answer 1

我相信如果您使用样式化组件（https://www.styled-components.com/），您可以直接使用CSS进行设置。它将是这样的：

import styled from 'styled-components/native';

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

然后像往常一样使用它：

<StyledView>

</StyledView>

希望它有所帮助！

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

Answer 3

您可以使用react-native的ImageBackground组件，并通过在嵌套视图周围添加一些填充来将视图包装到组件中

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

React Native - 如何制作边框图片？

3 个答案: