React Nativeの基本的なモジュール（2）
ScrollViewコンポーネント
Viewでも解説しましたが、Viewコンポーネントは、デフォルトで overflow: 'hidden'相当の挙動をするため、子要素が親要素からはみ出してもスクロールできません。これを解決するために、ScrollViewコンポーネントが使えます。これは、画面からはみ出た部分をスクロールできるようにするためのコンポーネントです。リスト6のように使います。
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のようになります。
画面の中央に200×200のScrollViewを設置して、その中がスクロールできるようにしました。もちろん、画面全体をスクロール領域にすることもできます。
ScrollViewコンポーネントが少し特殊な点として、スタイルの指定にstyle propsとcontentContainerStyle propsを使う点があります。 style propsは、ScrollViewの外側の枠組みを指定するためのものです。ここにpaddingを指定してもスクロール領域の内側には上手く余白がつきません。内側にpadding等を指定するためには contentContainerStyle propsを使います。
ほとんどのケースではstyleで事足りると思いますが、上手くいかない場合はcontentContainerStyleを使うといいでしょう。
TextInputコンポーネント
コンポーネントの最後にTextInputコンポーネントについて解説しましょう。これまでと毛色が変わって、ユーザーからの入力を受け付けるためのコンポーネントです。リスト7のように使います。
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のようになります。
（1）で指定したプレースホルダーが表示されていますね。実際に文字を入力してみると、入力された文字がdev serverを動かしているターミナルに表示されるはずです（図8）。
AndroidやiOSにはform要素に該当するものがないので、React Nativeでもフォームは用意されていません。入力値は一度useState等で状態管理してから送信処理に使うのが一般的です。（3）のようにスタイルを当てることもできます。Text向けのスタイルが使えるので、fontSizeや colorなどを指定して見た目を調整するとよいでしょう。
また、TextInputコンポーネントには、他にもいくつかのpropsが用意されています。例えば、 secureTextEntryをtrueにすることで、パスワード入力用のテキストボックスを作ることができ、keyboardTypeを指定することで、数値入力用のキーボードを表示させることもできます（リスト8）。
// (省略)
<TextInput
placeholder="パスワードを数値で入力してください"
// パスワード入力用のテキストボックスにする
secureTextEntry
// 数値入力用のキーボードを表示する
keyboardType="numeric"
style={{ borderWidth: 1, width: 200, padding: 8 }}
/>
// (省略)
実際にリスト8のコードを実行してみると、図9のようになります。
入力欄やキーボードの制御ができていますね。他にも多くのpropsが用意されていますので、詳しくは公式ドキュメントを参照してください。
StyleSheet API
最後に、 StyleSheet APIについて解説しましょう。これまでのサンプルの中でも登場していますが、 StyleSheet APIは、スタイルに名前を付けて管理するためのAPIです。リスト2のように StyleSheet.create() 関数でスタイルを定義し、コンポーネントのstyle propsに渡すことで、スタイルを適用できます。
このAPIを使うことで、スタイルの再利用性を高めることができます。また、複数のスタイルをstyle={[styles.a, styles.b]}のように配列で指定して、マージすることもできます。この場合、後に指定したスタイルが優先されます。
まとめ
React Nativeの基本的なコンポーネントを紹介しました。他にもコア部分に含まれるコンポーネントやAPIはいくつかあり、公式ページで一覧できます。
今回解説したものはごく一部ですが、大抵のコンポーネントは、今回解説したものの組み合わせで実現されています。特に、スタイルが3系統しかない、といったことはぜひ覚えておきましょう。サードパーティのコンポーネントを触るときに、気軽にスタイルを調整できるようになるはずです。
