HOWTO · React Native
React Nativeの中央画像
このチュートリアルでは、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: 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 がない場合は、最初にインストールしてください。
