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

Question

我想为一个View创建一个类似于CSS中的border-image边框图像。

我该如何实现？

- URL87

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

希望这能帮到你！

- Droow

---

我无法运行预览，但是这是链接：https://snack.expo.io/B1e7glEJQ - Droow

Answer 2

你可以使用react-native的ImageBackground组件，并在嵌套视图周围添加一些填充来包装你的视图。

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

- Muhammad Shoaib Riaz

Answer 3

我建议您使用一个包含边框的图像作为视图的第一个元素，并在视图内容上添加一些填充。

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

- tnt-rox