HOWTO · React Native
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: '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 がない場合は、最初にインストールしてください。
