React Native - Фоновое содержимое изображения прошло мимо экрана

#javascript #android #react-native #imagebackground

#язык JavaScript #Android #реагировать-родной #база изображений

Вопрос:

Я добавляю фон изображения в свое приложение, но горизонтальная часть изображения прошла мимо экрана (правая и левая части были вырезаны). Я попытался использовать ResizeMode cover и contain, но оба они ничего не дали. Есть ли какой-либо другой способ сделать так, чтобы изображение оставалось на экране? (Я использую ResizeMode для изображения, и оно обычно содержит изображение {то же изображение}).

 import React from 'react'; import {  Image,  ImageBackground,  StyleSheet,  Text,  TouchableOpacity,  View, } from 'react-native'; import {DCTBACKGROUND} from '../../../assets/images';  export default function GetStarted({navigation}) {  return (  lt;ImageBackground source={DCTBACKGROUND} style={styles.page}gt;  lt;View style={styles.buttonContainer}gt;  lt;TouchableOpacity  style={styles.button}  onPress={() =gt; {  navigation.navigate('Register');  }}gt;  lt;Text style={styles.buttonText}gt;Registrasilt;/Textgt;  lt;/TouchableOpacitygt;  lt;TouchableOpacity  style={styles.button}  onPress={() =gt; {  navigation.navigate('Login');  }}gt;  lt;Text style={styles.buttonText}gt;Loginlt;/Textgt;  lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;/ImageBackgroundgt;  ); }  const styles = StyleSheet.create({  page: {  backgroundColor: '#90CC8B',  flex: 1,  paddingHorizontal: 15,  paddingVertical: 25,  // resizeMode: 'contain',  },  button: {  backgroundColor: 'yellow',  width: 100,  height: 40,  alignItems: 'center',  justifyContent: 'center',  borderWidth: 1,  },  buttonText: {  color: 'black',  },  buttonContainer: {  justifyContent: 'space-between',  flexDirection: 'row',  },  logo: {  alignItems: 'center',  justifyContent: 'center',  flex: 1,  }, });

Горизонтальная часть изображения немного порезана, и мне нужно, чтобы все это было видно без порезов.

Ответ №1:

Добавьте ResizeMode в качестве прямой опоры в поле возврата изображений, а не как часть таблицы стилей.

 lt;ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}gt;