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

本文介绍了如何在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中重复图案图像以创建背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！