React Native で画像の幅をパーセントで設定する

MD Aminul Islam 2024年2月15日
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: '100%',
    height: 200,
    resizeMode: 'contain',
  },
});

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

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

上記のコード行イメージを含めた後、スタイル シートで以下のプロパティを設定します。

コンテナ の場合:

プロパティ 意味
フレックス: 1 コンテナーを flex として定義します。
背景色: '#fff' 背景色を白 2 色に設定します。
alignItems: 'center' 水平方向の配置を中央に設定します。
justifyContent: 'center' vertical-align を中央に設定します。

画像 の場合:

プロパティ 意味
幅: '100%' 画像の幅を 100% に設定します。
高さ: 200 画像の高さを 200 に設定します。
resizeMode:'contain' 画像をトリミングしないでください。

上記のサンプル コードを実行すると、以下の出力が得られます。

出力:

画像の幅をパーセントで設定

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

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

著者: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

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.

LinkedIn

関連記事 - React Native

関連記事 - React Native Image