【React Native Tips】キーボードを非表示にしてアプリの使い勝手を向上させる

2024-04-02

React Nativeでキーボードを非表示にする方法

Keyboard.dismiss()を使う

最も簡単な方法は、Keyboard.dismiss()関数を使うことです。これは、すべてのプラットフォームでキーボードを非表示にする標準的な方法です。

import { Keyboard } from 'react-native';

const App = () => {
  const hideKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <View>
      <TextInput />
      <Button title="キーボードを非表示にする" onPress={hideKeyboard} />
    </View>
  );
};

この方法は、ボタンなどの特定のコンポーネントのアクションによってキーボードを非表示にする場合に適しています。

KeyboardAvoidingViewコンポーネントを使うと、キーボードが画面に表示されたときに、コンテンツが自動的に上に移動するように設定できます。

import { KeyboardAvoidingView } from 'react-native';

const App = () => {
  return (
    <KeyboardAvoidingView behavior="padding">
      <TextInput />
    </KeyboardAvoidingView>
  );
};

この方法は、画面全体に配置されたコンテンツを、キーボードが隠れないように調整したい場合に適しています。

import { ScrollView } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <TextInput />
    </ScrollView>
  );
};

この方法は、長いコンテンツをスクロールできるようにしたい場合に適しています。

プラットフォーム固有のAPIを使う

AndroidとiOSでは、キーボードを非表示にするためのプラットフォーム固有のAPIがあります。これらのAPIを使うと、より詳細な制御が可能になります。

Android

react-native-keyboard-managerライブラリを使う
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN)を使う

iOS

[self.view endEditing:YES]を使う

その他のヒント

TextInputコンポーネントのreturnKeyTypeプロパティを使って、キーボードの完了ボタンの動作を設定できます。
blur()メソッドを使って、特定のテキスト入力フィールドをフォーカスから外すことができます。

React Nativeでキーボードを非表示にする方法はいくつかあります。状況に応じて最適な方法を選択する必要があります。

Keyboard.dismiss()を使う

import { Keyboard } from 'react-native';

const App = () => {
  const hideKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <View>
      <TextInput />
      <Button title="キーボードを非表示にする" onPress={hideKeyboard} />
    </View>
  );
};

KeyboardAvoidingViewを使う

import { KeyboardAvoidingView } from 'react-native';

const App = () => {
  return (
    <KeyboardAvoidingView behavior="padding">
      <TextInput />
    </KeyboardAvoidingView>
  );
};

ScrollViewを使う

import { ScrollView } from 'react-native';

const App = () => {
  return (
    <ScrollView>
      <TextInput />
    </ScrollView>
  );
};

プラットフォーム固有のAPIを使う

import { KeyboardManager } from 'react-native-keyboard-manager';

const App = () => {
  useEffect(() => {
    KeyboardManager.setKeyboardListener();
  }, []);

  const hideKeyboard = () => {
    KeyboardManager.hideKeyboard();
  };

  return (
    <View>
      <TextInput />
      <Button title="キーボードを非表示にする" onPress={hideKeyboard} />
    </View>
  );
};

import { KeyboardSpacer } from 'react-native-keyboard-spacer';

const App = () => {
  return (
    <View>
      <TextInput />
      <KeyboardSpacer />
    </View>
  );
};

補足

これらのサンプルコードは、基本的な使用方法を示しています。詳細については、React Nativeの公式ドキュメントを参照してください。

React Nativeでキーボードを非表示にするその他の方法

refsを使って、TextInputコンポーネントのフォーカスを解除することができます。

import { useRef } from 'react-native';

const App = () => {
  const inputRef = useRef();

  const hideKeyboard = () => {
    inputRef.current.blur();
  };

  return (
    <View>
      <TextInput ref={inputRef} />
      <Button title="キーボードを非表示にする" onPress={hideKeyboard} />
    </View>
  );
};

useEffectフックを使って、キーボードが表示されたときに特定の処理を実行することができます。

import { useEffect, useState } from 'react-native';

const App = () => {
  const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
      setIsKeyboardVisible(true);
    });
    const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setIsKeyboardVisible(false);
    });

    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  const hideKeyboard = () => {
    Keyboard.dismiss();
  };

  return (
    <View>
      {isKeyboardVisible && <Button title="キーボードを非表示にする" onPress={hideKeyboard} />}
    </View>
  );
};