ホーム » React Nativeチュートリアル » React Native Image

React Native Image

概要: このチュートリアルでは、React Native Imageコンポーネントを使用して、モバイルアプリに画像を表示する方法を学びます。

React Native Imageコンポーネントの概要

Imageコンポーネントを使用すると、モバイルアプリに画像を表示できます。 Imageコンポーネントを使用するには、次の手順に従います。

まず、react-nativeライブラリからImageコンポーネントをインポートします。

import Image from 'react-native';Code language: JavaScript (javascript)

次に、Imageコンポーネントを使用して画像を表示します。

<Image source={uri: imageUri } />Code language: JavaScript (javascript)

ソースは、リモートURLまたは画像へのパスにすることができます。 Imageコンポーネントは、さまざまなタイプの画像をサポートしています。

ネットワーク画像は、URLを介してアクセスできるリモートサーバーに保存されている画像です。これらの画像にはインターネット接続が必要です。

<Image source={{uri: 'http://imageUrl'}} />Code language: JavaScript (javascript)

次の例は、https://reactnative.dokyumento.jp/img/tiny_logo.png にあるReact Nativeロゴを表示する方法を示しています。

import { StyleSheet, Image, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
                style={styles.image} />
        </SafeAreaView >
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 50,
        height: 50,
    },

});

export default App;Code language: JavaScript (javascript)

出力

静的リソースは、assetsなどのリソースディレクトリに保存されている画像です。これらの画像はアプリにバンドルされており、インターネット接続なしで動作できます。

<Image source={require('imagePath')} />Code language: JavaScript (javascript)

たとえば、次のアプリは、Imageコンポーネントを使用して、プロジェクトディレクトリ内のassetsディレクトリにあるlogin.png画像を表示します。

import { StyleSheet, Image, SafeAreaView } from 'react-native';

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Image
                source={require('./assets/login.png')}
                style={styles.image}
            />
        </SafeAreaView >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    image: {
        width: 200,
        height: 200,
    },
});

export default App;Code language: JavaScript (javascript)

出力

一時的なローカル画像は、電話に一時的に保存されている画像です。これらの画像は通常、アプリの実行中にダウンロードまたは作成されます。

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

ローカルディスクからの画像は、電話のカメラで撮影した写真や、カメラロールまたはギャラリーに保存されているなど、電話のローカルストレージに保存されている画像です。

<Image source={{uri: imageUri}} />Code language: HTML, XML (xml)

画像を取得する前に、許可をリクエストする必要があることに注意してください。

リサイズモード

通常、画像はビュー内に完全に収まりません。画像を画像ビューに合わせるためにどのようにリサイズするかを決定するには、ImageコンポーネントのresizeModeプロパティを使用します。

resizeModeプロパティは、次の値をサポートしています。

cover

coverリサイズモードは、アスペクト比を維持しながらビューを埋めるように画像を拡大縮小します。アスペクト比が画像と異なる場合は、画像の一部が切り取られる可能性があります。

contain

containモードは、アスペクト比を維持しながら、画像がビューの内側に収まるように拡大縮小します。したがって、画像全体が表示されます。画像の縦横比がビューと異なる場合は、スペースができる可能性があります。

stretch

stretchモードは、アスペクト比を維持せずにビューを埋めるように画像を伸ばします。これにより、画像が歪む可能性があります。

repeat

このrepeatモードは、ビュー全体をカバーするように画像を繰り返します。画像をタイル状に並べてスペースを埋めます。

center

このcenterモードは、画像の元のサイズを維持し、ビューの中央に配置します。画像がビューよりも大きい場合は、クリップされます。画像が小さい場合は、拡大縮小されません。

以下は、さまざまなリサイズモードを使用して、React Nativeロゴ https://reactnative.dokyumento.jp/img/tiny_logo.png を表示する方法を示しています。

import { StyleSheet, Text, View, Image, SafeAreaView } from 'react-native';


const ImageDemo = () => {

    const url = 'https://reactnative.dokyumento.jp/img/tiny_logo.png';

    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.heading}>Resize Mode</Text>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'cover' }]} />
                <Text style={styles.text}>cover</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'contain' }]} />
                <Text style={styles.text}>contain</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'stretch' }]} />
                <Text style={styles.text}>stretch</Text>
            </View>

            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'repeat' }]} />
                <Text style={styles.text}>repeat</Text>
            </View>
            <View style={styles.imageWrapper}>
                <Image source={{ uri: url }} style={[styles.image, { resizeMode: 'center' }]} />
                <Text style={styles.text}>center</Text>
            </View>
        </SafeAreaView>
    );
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        flexDirection: 'row',
        flexWrap: 'wrap',

    },
    image: {
        width: 100,
        height: 150,
    },
    imageWrapper: {
        alignItems: 'center',
        margin: 10,
        borderColor: '#ddd',
        borderWidth: 1,
        padding: 8,
        borderRadius: 8,
    },
    heading: {
        fontSize: 32,
        width: '100%',
        textAlign: 'center',
        marginBottom: 16,
    },
    text: {
        fontSize: 24,
    }

});

export default ImageDemo;Code language: JavaScript (javascript)

出力

概要

  • React Native Imageコンポーネントを使用して、ローカルまたはリモートの画像を表示します。
  • 画像ビュー内に画像を収めるには、適切なリサイズモードを使用します。
このチュートリアルは役に立ちましたか？
React Native Switch
前へ
React Native Switch
次へ
React Native Flexbox
React Native Flexbox