Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSのキーボード入力ビューをカスタマイズする

 iOSのキーボード入力ビューをカスタマイズする

React Native Meetup #14 LT大会!の登壇資料です。

Demo
https://github.com/camcam-lemon/InputAccessoryViewDemoForm

camcam_lemon

October 24, 2023
Tweet

More Decks by camcam_lemon

Other Decks in Programming

Transcript

  1. iOSのキーボード入力ビューを
    カスタマイズする
    React Native Meetup #14

    View full-size slide

  2. 甲斐田 亮一
    @camcam_lemon
    株式会社CureApp
    エンジニア
    TypeScript, React / Figma
    Name
    Twitter
    Company
    Occupation
    Skills

    View full-size slide

  3. iOSのキーボード
    - TextInputにフォーカスすると現れる
    - keyboardTypeで見た目は変えれる
    - OSの言語が日本語だと地球マーク表れ

    日本語入力用のキーボードに切り替えれる

    View full-size slide

  4. iOS Safariのキーボード
    - キーボードの上に追加のUIがでてくる
    - [ ]でフォーム入力の切替
    - [完了]で入力終了(Keyboard.dismiss)
    - 入力フォームが切り替わるかは実装次第
    - 右の画像のkeyboardTypeがあるわけではない

    View full-size slide

  5. ネイティブアプリのキーボード

    View full-size slide

  6. キーボードはカスタマイズできる
    - キーボードの上に追加のUIを作ることができる
    - イベントハンドラやfetchも仕込めるので機能も足せる
    - ネイティブアプリではカスタムツールバーと呼ばれている
    - 俺が考えた最強のキーボードを作れる!!

    View full-size slide

  7. InputAccessoryView
    - React Nativeでカスタムツールバーを作るためのAPI
    - 現状 されている
    iOSのみサポート
    - Androidもサポートするなら react-native-keyboard-input
    - KeyboardAvoidingViewでもできなくはない

    View full-size slide

  8. 基本の使い方

    View full-size slide

  9. 基本の使い方
    ユニークなIDを定義

    View full-size slide

  10. 基本の使い方
    TextInputと

    InputAccessoryViewに

    それぞれIDを渡す

    View full-size slide

  11. イイカンジのログイン画面作ってみる
    - iOS Safari風のキーボードを再現してみる
    - フォームの移動とキーボードを閉じる機能を追加する

    View full-size slide

  12. DEMO
    https://github.com/camcam-lemon/InputAccessoryViewDemoForm

    View full-size slide