React Nativeの中央画像

MD Aminul Islam 2024年2月15日

React Native React Native Image

React-Native では、アプリに画像を実装するのは非常に簡単です。実装後、見栄えを良くするために、画像を完全に配置する必要があります。

この記事では、React-Native アプリの画像アイテムを中央に配置する方法について説明します。トピックを簡単にするために、例と説明を見ていきます。

React Nativeの中央画像

さまざまな目的で画像アイテムを一元化する必要がある場合があります。たとえば、アプリのプリローダーを設計している場合、プリローダーウィンドウにプリローダーイメージを提供する必要があります。これは中央に配置する必要があります。

以下の例では、React-Native アプリの中央に画像アイテムを配置する方法を示します。この例のコードスニペットは次のようになります。

// importing necessary packages
import {StatusBar} from 'expo-status-bar';
import {Image, StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://www.delftstack.com/assets/img/logo.png',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );
}
/ / Providing style to the app
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  img: {
    width: 200,
    height: 200,
    resizeMode: 'contain',
  },
});

上記の例で共有されている手順に関して、必要なすべての行の目的は既に指示されています。

<Image style={styles.img} source={{ uri: 'https://www.delftstack.com/assets/img/logo.png', }} />

上記のコード行で画像をインクルードした後、スタイルシートに以下のプロパティを設定します。

コンテナ の場合:

プロパティ	説明
`flex: 1,`	コンテナーを flex として定義します。
`backgroundColor: '#fff',`	背景色を白 2 色に設定します。
`alignItems: 'center',`	水平方向の配置を中央に設定します。
`justifyContent: 'center',`	vertical-align を中央に設定します。

画像 の場合:

プロパティ	説明
`width: 200,`	画像の幅を 200 に設定します。
`height: 200,`	画像の高さを 200 に設定します。
`resizeMode:'contain',`	画像をトリミングしないでください。

アプリを実行すると、画面に以下の出力が表示されます。

出力：

中央の画像はネイティブに反応します

上記のコードは React-Native で作成されていることに注意してください。 Expo-CLI を使用してアプリを実行しました。最新バージョンの Node.js も必要です。

お使いの環境に Expo-CLI がない場合は、最初にインストールしてください。

著者： MD Aminul Islam

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

React Nativeの中央画像

React Nativeの中央画像

関連記事 - React Native

関連記事 - React Native Image