[解決済み] フルスクリーンの背景画像を追加するのに最適な方法は?
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>
を使用すれば、うまくいきます。
関連
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vueにおけるv-forループオブジェクトのプロパティ
-
[解決済み】最大呼び出しスタックサイズ超過エラー
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでメールアドレスを検証するのに最適な方法は何ですか?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] モバイル端末の検出にはどのような方法がありますか?
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
[解決済み】awaitは非同期関数でのみ有効です。
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み】エラー。Ionic使用中にモジュール '../lib/utils/unsupported.js' が見つかりませんでした。
-
JavaScriptのStringに関する共通メソッド
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
OSSアップロードエラーを解決する: net::ERR_SSL_PROTOCOL_ERROR
-
jq は html ページとデータを動的に分割する。