Как представить одну и ту же картинку на разных устройствах? - PullRequest
Новая
       143

Как представить одну и ту же картинку на разных устройствах?

2 голосов
/ 11 июля 2020

Я новичок в мобильной разработке, и кое-что действительно важное вызвало у меня любопытство.

Предположим, я хочу представить картинку на 100% ширине и высоте экрана. Какого размера должно быть изображение, чтобы я мог оптимально представить его на каждом мобильном телефоне?

Каковы общие стратегии решения этой проблемы?

Спасибо

Ответы [ 2 ]

2 голосов
/ 11 июля 2020

Мне нужно было сделать это когда-то go, поэтому я написал компонент. По сути, я здесь сравниваю соотношение сторон экрана с соотношением сторон изображения и соответственно устанавливаю ширину и высоту, используя простую формулу. 

const Photo = ({imageUri}) => {
    const [imageSize, setImageSize] = useState({width: 0, height: 0});

    useEffect(() => {
        Image.getSize(imageUri, (imageWidth, imageHeight) => {
            const screenWidth = Dimensions.get('window').width;
            const screenHeight = Dimensions.get('window').height;

            if (imageWidth / imageHeight < screenWidth / screenHeight) {
                setImageSize({
                    width: imageWidth + (imageWidth * (screenHeight - imageHeight)) / imageHeight,
                    height: screenHeight,
                });
            } else {
                setImageSize({
                    height: imageHeight + (imageHeight * (screenWidth - imageWidth)) / imageWidth,
                    width: screenWidth,
                });
            }
        });
    }, []);

    return (
        <View style={styles.container}>
            <Image style={imageSize} source={{uri: imageUri}} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'black',
    },
});

export default Photo;

И вот вы go, независимо от вашего изображения соотношение сторон или соотношение сторон экрана, изображение поместится на экране.

Все, но имейте в виду, что если пользователь поворачивает экран, это больше не будет вычисляться, поэтому, если у вас есть приложение с портретной и включен альбомный режим, при изменении ориентации экрана вам придется снова выполнить расчет.

1 голос
/ 11 июля 2020

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

import { Dimensions } from 'react-native';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;

теперь вы можете передавать эти значения. 

<Image uri={myUri} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }}
...