React Nativeのモジュール
まずは、React Nativeのコア部分に含まれるモジュールを解説することにしましょう。前回の記事は基本となるモジュールが中心でしたが、今回はもう少し応用的なものを紹介します。
Platform API
Platformは、実行中のプラットフォームを判定したり、プラットフォームごとに異なる値を返したりするためのモジュールです。リスト1のように使用します。
import { View, Text, Platform } from 'react-native';
export const PlatformExample = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Platformサンプル</Text>
<Text style={styles.platformInfo}>
現在のプラットフォーム: {Platform.OS /* (1) */}
</Text>
<Text style={styles.platformInfo}>
バージョン: {Platform.Version /* (2) */}
</Text>
<Text style={styles.platformInfo}>
{Platform.select({
ios: 'これはiOSデバイスです',
android: 'これはAndroidデバイスです',
default: 'その他のプラットフォームです',
}) /* (3) */}
</Text>
{/* (略) */}
</View>
);
};
代表的なプロパティであるPlatform.OSとPlatform.Version、そして便利関数であるPlatform.select()を使用してみました。リスト1を実際に動かしてみると、図1のような結果が得られます。
（1）は、実行中のプラットフォームを判定するためのプロパティです。Platform.OSは、 "ios"や"android"といったプラットフォーム名を返します。条件分岐に使って、プラットフォームごとに異なる処理を実行するために使うことが多いです。
（2）は、実行中のプラットフォームのバージョンを返すプロパティです。iOSでは"17.4"のようなシステムバージョンを文字列で返し、Androidでは35のようなAPIレベルを数値で返します。AndroidのAPIレベルはプラットフォームバージョンの通し番号で、APIレベル35はAndroid 15を指します。機能の条件分岐や、エラーログの参考情報として利用するとよいでしょう。
（3）は、プラットフォーム名をキーとしたオブジェクトを渡すと、実行中のプラットフォームに対応する値を返します。ちょっとした表示を変えたいときに使うとよいでしょう。
FlatList コンポーネント
FlatListは、一覧表示をするためのコンポーネントです。前回解説したScrollViewをベースに作られており、内部的にはAndroidのScrollViewやiOSの UIScrollViewをカスタマイズする形で表現されるため、ネイティブなUIと遜色のないスクロール感を得られます。リスト2のように使用します。
import { View, Text, FlatList } from 'react-native';
// (1) データ配列
const data = [
{ id: '1', title: 'リスト項目 1' },
{ id: '2', title: 'リスト項目 2' },
{ id: '3', title: 'リスト項目 3' },
{ id: '4', title: 'リスト項目 4' },
{ id: '5', title: 'リスト項目 5' },
];
export const FlatListExample = ({ onBack }) => {
// (2) UIへの変換ルールを定義
const renderItem = ({ item }) => (
<View style={styles.item}>
<Text style={styles.itemText}>{item.title}</Text>
</View>
);
return (
<View style={styles.container}>
{/* (略) */}
<FlatList
data={data} // (1)
renderItem={renderItem} // (2)
keyExtractor={item => item.id} // (3)
style={styles.list}
/>
{/* (略) */}
</View>
);
};
// (略)
リスト2を実際に動かしてみると、図2のように表示されます。
FlatListコンポーネントは、データ配列をリストUIに変換するルールを指定するために、3つのpropsを渡すことで動作します。（1）は表示するデータの配列、（2）は各項目のレンダリング方法を定義する関数、（3）は各項目に付与するkey propsを決める関数です。（2）でデータ配列の各項目を判定しながらUIを決定できるため、かなり柔軟にリストUIをカスタマイズできます。ぜひ覚えておくとよいでしょう。
TouchableOpacity コンポーネント
タッチデバイスを扱うプラットフォームの機能として欠かせないのが、タッチイベントを扱うためのモジュールです。React Nativeにも多くのタッチイベントを扱うためのコンポーネントが用意されていますが、その中でも扱いやすいのがTouchableOpacity コンポーネントです。リスト3のように使用します。
import { View, Text, TouchableOpacity } from 'react-native';
import { useState } from 'react';
export const TouchableExample = ({ onBack }) => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.title}>TouchableOpacityサンプル</Text>
<View style={styles.demoContainer}>
<TouchableOpacity
style={styles.button}
onPress={() => setCount(prev => prev + 1)} // (1)
activeOpacity={0.7} // (2)
>
<Text style={styles.buttonText}>
タップしてください（{count}回）
</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style={styles.backButton} onPress={onBack}>
<Text style={styles.backButtonText}>戻る</Text>
</TouchableOpacity>
</View>
);
};
// (略)
Reactのサンプルらしく、カウンターを実装してみました。リスト3を実際に動かしてみると、図3のように表示されます。
TouchableOpacity は、任意のUIをタップできるようにしつつ、タップ時にUIの透明度が変わるコンポーネントです。（1）のonPressで、タップイベントのハンドラを扱うことができます。（2）の activeOpacityは、タップ時の透明度を指定するためのpropsです。この値が小さいほど、タップ時に透明度が高くなります。
アプリのデザイン次第では、透明度が変わる挙動ではない方がうれしい場合もあるでしょう。その場合は、Pressableという、カスタマイズ性が非常に高いコンポーネントもありますので、ぜひ調べてみてください。
