React Native - 图像背景内容越过屏幕

Question

我正在向我的应用程序添加图像背景，但图像的水平部分超出了屏幕（左右部分被剪切）。我尝试使用 resizeMode cover 和 contain，但两者都没有做任何事情。有没有其他方法可以使图像停留在屏幕内？（我在 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,
  },
});

图片水平部分被剪掉了一点，我需要让它在不被剪掉的情况下全部显示出来。

Answer 1

将 resizeMode 作为直接属性添加到 ImageBackground，而不是样式表的一部分。

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

React Native - 图像背景内容越过屏幕

React Native - Image Background content went past the screen

javascript

android

react-native

imagebackground