1. ホーム
  2. javascript

[解決済み] フルスクリーンの背景画像を追加するのに最適な方法は?

2022-04-23 22:13:46

質問

Viewにフルスクリーン画像を追加したいので、以下のコードを書きました。

return (
    <View style={styles.container}>
        <Image source={require('image!egg')}  style={styles.backgroundImage}/>
    </View>
)

と定義し、スタイルを

var styles = StyleSheet.create({
container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
     flexDirection: 'column',
},
     backgroundImage:{
     width:320,
     height:480,
   }
...

しかし、これでは実際のiPhoneの画面サイズをどうやって調べればいいのでしょうか?

Pixel DensityにアクセスするAPIは見たことがありますが、画面サイズに関するものはありませんでした...。

解決方法は?

を使用することができます。 flex: 1 スタイリングを <Image> 要素で、画面いっぱいに表示させることができます。その後、画像リサイズモードの1つを使用して、画像を完全に要素内に収まるようにすることができます。

<Image source={require('image!egg')} style={styles.backgroundImage} />

スタイル

import React from 'react-native';

let { StyleSheet } = React;

let styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: 'cover', // or 'stretch'
  }
});

を取り除けばいいんだろうけど。 <View> を使用すれば、うまくいきます。