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

Question

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

Answer 1

的iOS

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

像这样使用它：

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

的Android

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

我想延长斯里兰卡的答案。要将重复的图像作为背景，您需要执行一个额外的步骤：添加新视图并使其位置绝对和背景透明，然后添加其中的所有其他组件。

＆＃13;

＆＃13;

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>
    )
  }
});

＆＃13;

＆＃13;

＆＃13;

Answer 3

您无法在React Native中重复CSS等背景图片。但是，您可以通过迭代图像来实现它，如

p1 := plots:-intersectplot(y=x^2, y=3^6*z-432, x=-50..50, z=0..20, y=0..14000);

Answer 4

尽管这个问题已经很老了，我还是想投入两分钱。也可以通过<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';