React Nativeの基本モジュールをおさらいして、Expoを使いこなそう

ExpoとEASで始める快適モバイルアプリ開発 第2回

React Nativeの基本的なモジュール（2）

ScrollViewコンポーネント

　Viewでも解説しましたが、Viewコンポーネントは、デフォルトで overflow: 'hidden'相当の挙動をするため、子要素が親要素からはみ出してもスクロールできません。これを解決するために、ScrollViewコンポーネントが使えます。これは、画面からはみ出た部分をスクロールできるようにするためのコンポーネントです。リスト6のように使います。

［リスト6］App.js

import { ScrollView, StyleSheet, Text, View } from 'react-native';
// (省略)
export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView
        // (1) 外側のスタイルはstyleで指定する
        style={{ maxHeight: 200, width: 200, borderWidth: 1 }}
        // (2) 内側のスタイルはcontentContainerStyleで指定する
        contentContainerStyle={{ padding: 8 }}
      >
        {/* たくさんのTextを並べる */}
        {Array.from({ length: 100 }).map((_, i) => (
          <Text key={i}>Hello world! {i}</Text>
        ))}
      </ScrollView>
      <StatusBar style="auto" />
    </View>
  );
}
// (省略)

　テキストをたくさん並べて、スクロールできるようにしてみました。実際に表示してみると、図6のようになります。

図6：ScrollViewコンポーネントを使ってスクロール可能な領域を作る

　画面の中央に200×200のScrollViewを設置して、その中がスクロールできるようにしました。もちろん、画面全体をスクロール領域にすることもできます。

　ScrollViewコンポーネントが少し特殊な点として、スタイルの指定にstyle propsとcontentContainerStyle propsを使う点があります。 style propsは、ScrollViewの外側の枠組みを指定するためのものです。ここにpaddingを指定してもスクロール領域の内側には上手く余白がつきません。内側にpadding等を指定するためには contentContainerStyle propsを使います。

　ほとんどのケースではstyleで事足りると思いますが、上手くいかない場合はcontentContainerStyleを使うといいでしょう。

TextInputコンポーネント

　コンポーネントの最後にTextInputコンポーネントについて解説しましょう。これまでと毛色が変わって、ユーザーからの入力を受け付けるためのコンポーネントです。リスト7のように使います。

［リスト7］App.js

import { StyleSheet, TextInput, View } from 'react-native';
// (省略)
export default function App() {
  return (
    <View style={styles.container}>
      <TextInput
        // (1) プレースホルダーを指定する
        placeholder="入力してください"
        // (2) テキストが入力されたときの処理を指定する
        onChangeText={(text) => console.log(text)}
        // (3) テキストのスタイルを指定する
        style={{ borderWidth: 1, width: 200, padding: 8 }}
      />
      <StatusBar style="auto" />
    </View>
  );
}
// (省略)

　入力された文字をコンソールに出力するようにしてみました。実際に表示してみると、図7のようになります。

図7：TextInputコンポーネントを使ってユーザーからの入力を受け付ける

　（1）で指定したプレースホルダーが表示されていますね。実際に文字を入力してみると、入力された文字がdev serverを動かしているターミナルに表示されるはずです（図8）。

図8：TextInputコンポーネントで入力された文字がコンソールに表示される

　AndroidやiOSにはform要素に該当するものがないので、React Nativeでもフォームは用意されていません。入力値は一度useState等で状態管理してから送信処理に使うのが一般的です。（3）のようにスタイルを当てることもできます。Text向けのスタイルが使えるので、fontSizeや colorなどを指定して見た目を調整するとよいでしょう。

　また、TextInputコンポーネントには、他にもいくつかのpropsが用意されています。例えば、 secureTextEntryをtrueにすることで、パスワード入力用のテキストボックスを作ることができ、keyboardTypeを指定することで、数値入力用のキーボードを表示させることもできます（リスト8）。

［リスト8］

// (省略)
<TextInput
  placeholder="パスワードを数値で入力してください"
  // パスワード入力用のテキストボックスにする
  secureTextEntry
  // 数値入力用のキーボードを表示する
  keyboardType="numeric"
  style={{ borderWidth: 1, width: 200, padding: 8 }}
/>
// (省略)

　実際にリスト8のコードを実行してみると、図9のようになります。

図9：パスワード入力モードで数値キーボードを表示する

　入力欄やキーボードの制御ができていますね。他にも多くのpropsが用意されていますので、詳しくは公式ドキュメントを参照してください。

StyleSheet API

　最後に、 StyleSheet APIについて解説しましょう。これまでのサンプルの中でも登場していますが、 StyleSheet APIは、スタイルに名前を付けて管理するためのAPIです。リスト2のように StyleSheet.create() 関数でスタイルを定義し、コンポーネントのstyle propsに渡すことで、スタイルを適用できます。

　このAPIを使うことで、スタイルの再利用性を高めることができます。また、複数のスタイルをstyle={[styles.a, styles.b]}のように配列で指定して、マージすることもできます。この場合、後に指定したスタイルが優先されます。

まとめ

　React Nativeの基本的なコンポーネントを紹介しました。他にもコア部分に含まれるコンポーネントやAPIはいくつかあり、公式ページで一覧できます。

　今回解説したものはごく一部ですが、大抵のコンポーネントは、今回解説したものの組み合わせで実現されています。特に、スタイルが3系統しかない、といったことはぜひ覚えておきましょう。サードパーティのコンポーネントを触るときに、気軽にスタイルを調整できるようになるはずです。