Я создаю простое приложение ReactNative для iOS, и я пытаюсь добавить фоновое изображение. Кажется, что нет тега backgroundImage, и пока мне удалось показать изображение на странице один раз, я не могу повторять его на всей странице, как вы можете, с помощью CSS. Любые предложения?
Как я могу повторить образ шаблона для создания фона в React Native?
Ответ 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>
)
}
});