🐤

React Nativeで、Imageの横幅を指定して、縦幅を自動調整する

2022/05/14に公開

React Native

React

tech

背景

個人開発で開発しているときに、React NativeでImageを画面幅で調整して、自動高さ調整をしたかったところ、resizeModeを使って簡単にできなかったので備忘録として記録しておきます。
Imageの高さを自動調整するライブラリもありましたが、依存関係を増やしたくなかったうえ、簡単だったので自前実装しています。

やり方

ポイントは、Image.resolveAssetSourceとImage.getSizeでオリジナルの画像サイズを取得しているところです。


import React, {useEffect, useState} from 'react'
import {Image, ImageRequireSource, ImageStyle, ImageURISource, StyleProp} from 'react-native'


export const AutoHeightImage: React.VFC<{
    source: ImageURISource | ImageRequireSource
    width: number
    style?: StyleProp<ImageStyle>
}> = (props) => {
    const { source, style, width } = props
    const [height, setHeight] = useState<number>(0)

    useEffect(() => {
        if( typeof source === 'number'){
            const originalSize = Image.resolveAssetSource(source)
            const newHeight = width * originalSize.height / originalSize.width
            setHeight(newHeight)
        }else if(source?.uri){
            Image.getSize(source.uri,
                (originalWidth, originalHeight) =>{
                    const newHeight = width * originalHeight / originalWidth
                    setHeight(newHeight)
                }
            )
        }
    }, [source, width])

    return (
        <Image source={source} resizeMode='contain' style={[{height, width}, style]} />
    )
}

使い方

// globald.d.tsに下記でのように'*.png'ファイルの型を定義
declare module '*.png' {
    import {ImageRequireSource} from 'react-native'

    const value: ImageRequireSource
    export default value
}

const windowWidth = Dimensions.get('window').width

// URL画像
<AutoHeightImage 
    source={{uri: 'https://images.dog.ceo/breeds/ovcharka-caucasian/IMG_20190601_185700.jpg'}} 
    width={windowWidth * 0.9}/>

// ローカルPNG画像
import imgSample from '@assets/img/sample.png'
<AutoHeightImage 
    source={imgSample} 
    width={windowWidth * 0.9}/>

背景

やり方

使い方

Discussion