如何在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中重复图案图像以创建背景?

相关推荐