開発環境:
- React Native
- Expo
React NativeとExpoを使用してモバイルアプリを開発する際に、キーボードのリターンキー（またはエンターキー）の見た目と動作を制御する方法について紹介します。具体的には、キーボードの「改行」を「完了」に表示を置き換える方法と、リターンキーが押されたときの動作を設定する方法を解説します。
リターンキーの表示を制御する
React NativeのTextInputコンポーネントでは、returnKeyTypeプロパティを使ってリターンキーの見た目を変更することが可能です。以下に具体的なコードを示します。
import React from 'react';
import { TextInput } from 'react-native';
const App = () => {
return (
<TextInput
returnKeyType="done"
/>
);
};
export default App;
このコードでは、returnKeyTypeにdoneを指定しています。この結果、キーボードのリターンキーの表示が「改行」から「完了」に変わります。
returnKeyTypeの他の値
returnKeyTypeプロパティには、他にも以下のような値を指定することが可能です。
-
default: プラットフォームのデフォルトの見た目。日本語環境では通常「リターン」と表示されます。 -
go: 日本語環境では「次へ」と表示されます。フォームを次に進めるために使用します。 -
next: 日本語環境では「次へ」と表示されます。次の入力フィールドに移動するために使用します。 -
search: 日本語環境では「検索」と表示されます。検索フォームを送信するために使用します。 -
send: 日本語環境では「送信」と表示されます。メッセージなどを送信するために使用します。 -
done: 日本語環境では「完了」と表示されます。全ての入力が終わったことを示すために使用します。
リターンキーが押されたときの動作を制御する
returnKeyTypeでリターンキーの見た目を制御した上で、リターンキーが押されたときの動作を制御するにはonSubmitEditingイベントハンドラを使用します。
import React from 'react';
import { TextInput, Alert } from 'react-native';
const App = () => {
return (
<TextInput
returnKeyType="done"
onSubmitEditing={() => Alert.alert('Submit Button Pressed')}
/>
);
};
export default App;
上記の例では、リターンキーが押されたときにAlert.alert('Submit Button Pressed')が実行され、アラートダイアログが表示されます。
まとめ
React Nativeでは、returnKeyTypeプロパティとonSubmitEditingイベントハンドラを使用して、キーボードのリターンキーの見た目と動作を簡単に制御することができます。これにより、アプリケーションのユーザビリティを向上させることができます。特定の言語環境、この場合は日本語環境に応じた表示と動作を行いたい場合にも役立ちます。