React Native基礎

ScrollViewコンポーネント

ScrollViewコンポーネント

要素をScrollViewコンポーネントで囲むことでアプリにスクロール機能を組み込むことができます。ScrollViewでは子要素のレイアウト方法をcontentContainerStyleプロパティで指定します（別途、styleプロパティでScrollView自体のマージン等を設定することもできます）

<ScrollView contentContainerStyle={styles.contentsWrapper}>
  <Text style={styles.bigText}>
    ScrollViewを使わない場合、デバイスの画面サイズを超えた部分は表示が切れてしまいます。
  </Text>
  <Text style={styles.bigText}>
    要素をScrollViewで囲むだけでアプリにスクロール機能を実装することができます。
  </Text>
  <Text style={styles.bigText}>
    子要素のレイアウトはcontentContainerStyleで指定します。
  </Text>
</ScrollView>

React Nativeでは画面全体が表示領域となるのでステータスバーに表示が食い込むことになります。これに対応するには以下の方法があります。

React Nativeではステータスバーを制御しない

Expoでプロジェクトを作成するとデフォルトで以下のようにStatusBarコンポーネントが組み込まれています。

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

このStatusBar要素があるとステータスバーが制御対象になり、ステータスバーを含む画面全体が表示領域になります。この要素を削除すると以下のようにステータスバーは制御対象ではなくなり、表示領域はステータスバーを除いた部分になります。

なお、StatusBar要素を削除するのではなく、hiddenプロパティをtrueにすることで以下のようにステータスバーを非表示にすることも可能です。

ステータスバーの高さを意識してレイアウトを設定する

ステータスバーに表示が食い込まないようにするには要素のスタイルとしてmarginTopを設定すればいいわけですが、「ステータスバーの高さ」はOSにより異なります。expo-constantsパッケージ（依存関係によりデフォルトでインストールされています）を使うことでこの「ステータスバーの高さ」を取得し、要素のレイアウトに利用できます。

import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    // ステータスバーの高さ分マージンを空ける
    marginTop: Constants.statusBarHight
  },