【react-native】react-nativeでアプリ背景を変更する方法

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が分けることができるのでこちらもできるはず。