浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react-native】ImageBackgroundを使ってアプリ背景を決める

react-nativeでアプリのページ単体の背景を変えたい場合は、react-native付属の

ImageBackgroundコンポーネントを使うことで実現することができます。

使用方法は、sourceプロパティに背景にしたい画像を追加するだけ。ここに追加すると

追加した背景がアプリ全体に表示されます。

 

</pre>
<ImageBackground source={require('../../assets/carm_sea.jpg')} style={mainStyle.image}>
<View style={mainStyle.contents}>
<StatusBar/>
<View style={mainStyle.boxStyle}>
<Box/>
</View>
<View style={mainStyle.DatePickerStyle}>
{this.state.isModalDisplay ? <OpningDatapicker dated={this.state.date} change={(e,selectedDate) => {this.dateChange(e,selectedDate)}}/> : null}
</View>
</View>
</ImageBackground>
<pre>

一番最初にImageBackgroundで表示したいView全体を囲みます。

その下にスタッツバー、次にメインに表示するViewを入れていきます。

簡単な使用方法は以上になります。

本当はいちいちプロパティに指定せずに一括でページの背景を決めてしまいたいのですが

Viewが分けることができるのでこちらもできるはず。

  • この記事いいね! (0)