React-Native ImageBackground повтор не работает - PullRequest
Новая
       68

React-Native ImageBackground повтор не работает

0 голосов
/ 07 ноября 2019

Я начал изучать реактивный язык и столкнулся с проблемой. Мне нужно изображение, чтобы повторить в фоновом режиме, но оно растянуто. Похоже, что resizeMode не работает. 

import React, { Component } from 'react';
import { Image, ImageBackground, StyleSheet, Button, View, Text } from 'react-native';

const styles = StyleSheet.create({
  home: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent',
  },
  backgroundImage: {
    flex: 1,
    resizeMode: 'repeat',
    backgroundColor: '#882829'
  }
});

export class HomeScreen extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <ImageBackground source={require('../assets/stain_pattern.png')} style={styles.backgroundImage}>
          <View style={styles.home}>
            <Text>Home Screen</Text>
            <Button
              title="Go to Details"
              onPress={() => this.props.navigation.navigate('Details')}
            />
          </View>
        </ImageBackground>
      </View>
    );
  }
}

1 Ответ

0 голосов
/ 07 ноября 2019

Вам необходимо использовать imageStyle = {{resizeMode: 'repeat'}}. См. Документацию ссылка

Вам необходимо применить повтор в стиле изображения 

<ImageBackground source={require('../assets/stain_pattern.png')} style={styles.backgroundImage} imageStyle={{resizeMode: 'repeat'}}>
          <View style={styles.home}>
            <Text>Home Screen</Text>
            <Button
              title="Go to Details"
              onPress={() => this.props.navigation.navigate('Details')}
            />
          </View>
        </ImageBackground>
...