如何在React Native中重复图案图像以创建背景? [英] How can I repeat a pattern image to create a background in React Native?

问题描述

我正在为iOS构建一个简单的ReactNative应用程序，并且试图添加背景图片.似乎没有backgroundImage标记，尽管我确实设法在页面上显示了一次图像，但我无法像使用CSS一样在整个页面上重复该图像.有什么建议吗?

I'm building a simple ReactNative app for iOS and I'm trying to add a background image. It seems like there is no backgroundImage tag, and while I did manage to show the image on the page once, I can't repeat it throughout the page like you can with CSS. Any suggestions?

推荐答案

您无法在React Native中重复使用CSS之类的背景图像.但是，您可以通过迭代图像来实现它

You can't repeat background image like CSS in React Native. But, You can achieve it by iterating the image like

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

这篇关于如何在React Native中重复图案图像以创建背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！