Reaktif Yerleşim'de bir arka plan oluşturmak için desen görüntüsünü nasıl tekrar edebilirim?

Question

iOS için basit bir ReactNative uygulaması yapıyorum ve bir arka plan resmi eklemeye çalışıyorum. Hiçbir backgroundImage etiketi yok gibi görünüyor ve ben görüntüyü sayfada bir kez göstermeyi başarırken, CSS ile yapabildiğiniz gibi sayfa boyunca tekrarlayamıyorum. Baska öneri?

Answer 1

Arka Plan resminde CSS gibi React Native'de tekrarlanamazsınız. Ancak, görüntüyü yinelemek için

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

Answer 2

Sriraman'ın yanıtını genişletmek istiyorum. Tekrarlanan görüntüleri arka plan olarak yapmak için, yeni bir görünüm ekleme ve konumunu mutlak ve arka plan saydam hale getirme, ardından içindeki tüm diğer bileşenleri ekleme konusunda ek bir adım atmanız gerekir. iOS üzerinde

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 style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}> 
 
       {/*Place all you compoents inside this view*/} 
 
      </View> 
 
     </View> 
 
    ) 
 
    } 
 
});

Answer 3

Görüntüler artık repeatresizeMode property sayılabilir.

şöyle kullanın:

<Image 
    src={/* whatever your source is */} 
    resizeMode="repeat" 
/> 

Android günü mülkiyet böylece çalışmadığına sen Shiraman's answer