React Native - 图片背景内容超出了屏幕

Posted 2023-05-07

【中文标题】React Native - 图片背景内容超出了屏幕

【英文标题】：React Native - Image Background content went past the screen

【发布时间】：2022-01-12 05:33:11

【问题描述】：

我正在向我的应用程序添加图像背景，但图像的水平部分超出了屏幕（右侧和左侧部分被剪切）。我尝试使用 resizeMode 覆盖和包含但它都没有做任何事情。有没有其他方法可以使图像留在屏幕内？ （我在 Image 上使用 resizeMode，它通常包含图像 same picture）。

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 (
    <ImageBackground source=DCTBACKGROUND style=styles.page>
      <View style=styles.buttonContainer>
        <TouchableOpacity
          style=styles.button
          onPress=() => 
            navigation.navigate('Register');
          >
          <Text style=styles.buttonText>Registrasi</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style=styles.button
          onPress=() => 
            navigation.navigate('Login');
          >
          <Text style=styles.buttonText>Login</Text>
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );


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 作为直接属性添加到 ImageBackground，而不是 StyleSheet 的一部分。

 <ImageBackground resizeMode="contain" source=DCTBACKGROUND style=styles.page>

【讨论】：

谢谢，但由于我使用contain后顶部和底部都有空间，所以我将其更改为拉伸并填充顶部和底部