Как я могу повторить образ шаблона для создания фона в React Native?

Я создаю простое приложение ReactNative для iOS, и я пытаюсь добавить фоновое изображение. Кажется, что нет тега backgroundImage, и пока мне удалось показать изображение на странице один раз, я не могу повторять его на всей странице, как вы можете, с помощью CSS. Любые предложения?

Ответ 1

Вы не можете повторять фоновое изображение, например CSS в React Native. Но вы можете достичь этого, итерируя изображение, например

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

Ответ 2

IOS

Изображения на iOS теперь имеют свойство repeat resizeMode.

Используйте это так:

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

Android

Обновление за июнь 2018 года:

Начиная с реакции-нативной версии 0.56 Android-изображения также поддерживают repeat поддержку. (https://github.com/facebook/react-native/commit/0459e4ffaadb161598ce1a5b14c08d49a9257c9c)

До июня 2018 года:

~~В Android свойство repeat НЕ работает так: вам придется использовать что-то вроде ответа Shiraman~~

Внешняя библиотека:

Там сейчас этот замечательный проект под названием response-native-bgimage (созданный Алексом Меланченко), который хорошо работает:

Вот как я это использую:

import RepeatingPattern from 'react-native-bgimage';

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

а затем я добавляю png файл шаблона в android/app/src/main/res/drawable/block_pattern.png

Ответ 3

Я хотел бы продлить ответ Шрираману. Чтобы сделать повторяющиеся изображения в качестве фона, вам нужно сделать дополнительный шаг добавления нового представления и сделать его положение абсолютным и фоновым прозрачным, а затем добавить в него все остальные компоненты.

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