且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-01-25 22:41:59

您无法在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>
    )
  }
});