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

【问题标题】：React Native - how to make a border image?React Native - 如何制作边框图像？
【发布时间】：2018-10-24 21:36:12
【问题描述】：

我想为 View 制作一个边框图像，类似于 css 中的 border-image。

我怎样才能实现它？

【问题讨论】：

标签： css reactjs 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>

希望对你有帮助！

【讨论】：

我无法运行预览，但你去吧：snack.expo.io/B1e7glEJQ

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：