1

我正在向我的应用程序添加图像背景，但图像的水平部分超出了屏幕（右侧和左侧部分被剪切）。我尝试使用 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,
  },
});

图像水平部分被剪掉了一点，我需要让它全部显示而不被剪掉。 水平图像被剪切

4

1 回答 1

1

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

 <ImageBackground resizeMode="contain" source={DCTBACKGROUND} style={styles.page}>
于 2021-12-07T06:08:52.910 回答