Want to repeat a pattern image to create a background in React Native? You can’t repeat background image like CSS in React Native. But, You can achieve it by iterating the image like below example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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> ) } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
