如何在 React Native 中重复图案图像以创建背景？

Question

我正在为 iOS 构建一个简单的 ReactNative 应用程序，并且我正在尝试添加背景图像。似乎没有 backgroundImage 标记，虽然我确实设法在页面上显示了一次图像，但我不能像使用 CSS 那样在整个页面中重复它。有什么建议吗？

Answer 1

iOS

iOS 上的图像现在包含 repeat resizeMode property。

像这样使用它：

<Image
    src={/* whatever your source is */}
    resizeMode="repeat"
/>

安卓

2018 年 6 月更新：

从 react-native 0.56 Android 图片开始也支持 repeat 属性。 (https://github.com/facebook/react-native/commit/0459e4ffaadb161598ce1a5b14c08d49a9257c9c)

2018 年 6 月之前：

在 Android 上，repeat 属性不起作用，因此： 你必须使用类似Shiraman's answer

外部库：

现在有一个名为react-native-bgimage（由Alex Melanchenko 创建）的伟大项目运行良好：

我是这样使用它的：

import RepeatingPattern from 'react-native-bgimage';

<RepeatingPattern
    drawable="block_pattern"
    style={{
      height: 45,
    }}
/>

然后我在android/app/src/main/res/drawable/block_pattern.png中添加一个模式png文件

Answer 2

尽管这个问题已经很老了，但我想把我的两分钱放进去。也可以通过<ImageBackground> 组件 (reference) 来完成。

例子：

<ImageBackground source={require('./path/to/image.png')} style={{width: '100%', height: '100%'}} imageStyle={{resizeMode: 'repeat'}}>
  // Your inside content goes here
</ImageBackground>

不要忘记在文件开头导入组件，例如import { ImageBackground } from 'react-native';

Answer 3

我想扩展 Sriraman 的答案。要将重复的图像作为背景，您需要采取一个额外的步骤，即添加一个新视图并使其位置绝对和背景透明，然后在其中添加所有其他组件。

var React = require('react-native');
var Dimensions = require('Dimensions');

var {
  Image
} = React;

var RepeatImage = React.createClass({
    render: function(){
    var images = [],  
    imgWidth = 7,
    winWidth =Dimensions.get('window').width;

    for(var i=0;i<Math.ceil(winWidth / imgWidth);i++){
        images.push((
           <Image source={{uri: 'http://xxx.png'}} style={} />
        ))
    }

    return (
        <View style={{flex:1,flexDirection:'row'}}>
        {
         images.map(function(img,i){
         return img;
         })
        }
          <View style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
              {/*Place all you compoents inside this view*/}
          </View>
        </View>
    )
  }
});

Answer 4

你不能像 React Native 中的 CSS 那样重复背景图片。但是，您可以通过像这样迭代图像来实现它

var React = require('react-native');
var Dimensions = require('Dimensions');

var {
  Image
} = React;

var RepeatImage = React.createClass({
    render: function(){
    var images = [],  
    imgWidth = 7,
    winWidth =Dimensions.get('window').width;

    for(var i=0;i<Math.ceil(winWidth / imgWidth);i++){
        images.push((
           <Image source={{uri: 'http://xxx.png'}} style={} />
        ))
    }

    return (
        <View style={{flex:1,flexDirection:'row'}}>
        {
         images.map(function(img,i){
         return img;
         })
        }
        </View>
    )
  }
});