[React Native] 背景画像を表示する方法（ImageBackgroundコンポーネント）

React Native

2023.12.25

概要
サンプル

概要

React Nativeで背景画像を表示する場合、ImageBackgroundコンポーネントを使う。

背景を画像にするだけでアプリがカッコよく見える。
paddingを指定して上下左右の余白に背景画像を表示することで、カッコよく見える。

サンプル

import { StyleSheet, ScrollView, ImageBackground } from "react-native";

export default function App() {
  return (
    <ScrollView style={styles.container}>
      <ImageBackground source={require("../assets/images/background.jpg")} resizeMode="cover" style={{padding:10}}/>
      〜省略〜
      </ImageBackground>
    </ScrollView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#202328",
  },
});