web-dev-qa-db-fra.com

Comment puis-je répéter une image de motif pour créer un arrière-plan en React Native?

Je crée une application ReactNative simple pour iOS et j'essaie d'ajouter une image d'arrière-plan. Il semble qu'il n'y ait pas de balise backgroundImage, et même si j'ai réussi à afficher l'image sur la page une fois, je ne peux pas la répéter tout au long de la page comme vous le pouvez avec CSS. Aucune suggestion?

iosreactjsreact-native
15
Shirley Rozenboim

Vous ne pouvez pas répéter l'image d'arrière-plan comme CSS dans React Native. Mais, vous pouvez y parvenir en itérant l'image comme

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

iOS

Les images sur iOS incluent désormais un repeatpropriété resizeMode .

Utilisez-le comme ceci:

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

Android

Mise à jour de juin 2018:

À partir de react-native 0.56 Android Les images prennent également en charge la propriété repeat. ( https://github.com/facebook/react-native/commit/0459e4ffaadb161598ce1a5b14c08d49a9257c9c )

Avant juin 2018:

Sur Android la propriété repeat ne fonctionne PAS donc: vous devrez utiliser quelque chose comme réponse de Shiraman

Bibliothèque externe:

Il y a maintenant ce grand projet appelé react-native-bgimage (créé par Alex Melanchenko ) qui fonctionne bien:

Voici comment je l'utilise:

import RepeatingPattern from 'react-native-bgimage';

<RepeatingPattern
    drawable="block_pattern"
    style={{
      height: 45,
    }}
/>

puis j'ajoute un fichier png de modèle dans Android/app/src/main/res/drawable/block_pattern.png

16
SudoPlz

Je voudrais étendre la réponse de Sriraman. Pour rendre les images répétées comme arrière-plan, vous devez prendre une étape supplémentaire pour ajouter une nouvelle vue et rendre sa position absolue et l'arrière-plan transparent, puis ajouter tous les autres composants à l'intérieur de celle-ci.

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>
    )
  }
});
5
Aakash Sigdel

Malgré le fait que cette question soit assez ancienne, je voudrais mettre mes deux sous. Elle peut également être effectuée via <ImageBackground> composant ( référence ).

Exemple:

<ImageBackground source={require('./path/to/image.png')} style={{width: '100%', height: '100%'}} imageStyle={{resizeMode: 'repeat'}}>
  // Your inside content goes here
</ImageBackground>

N'oubliez pas d'importer le composant au début du fichier, par ex. import { ImageBackground } from 'react-native';

0
Razvodovsky