iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Mobile Development

卡卡30天學 React Native系列 第 27

[ 卡卡 DAY 27 ] - React Native keyboard 之亂之按螢幕就收鍵盤

若是鍵盤沒有之前教的設定 next 與 go 的機制
打完字過後鍵盤就會收不起來
這邊來跟大家分享一個叫做 TouchableWithoutFeedback 的 RN 元件
在手機裝置打完字後,點擊螢幕就可以將鍵盤收起來
一起讓使用者有良好的體驗吧!

使用時機

有使用 input 系列元件,凡是會有鍵盤出現的 screens 都可以使用!

使用方法

  1. 在有使用 input 的 screen 引入元件
import { TouchableWithoutFeedback, Keyboard } from "react-native";
  1. 在元件最外層包上
    <TouchableWithoutFeedback
      onPress={Keyboard.dismiss}
      accessible={false}
    >
    </TouchableWithoutFeedback>

做成 HOC

  1. 於 utils/ 創建 HOCDismissKeyboard.js
import React from "react";
import { TouchableWithoutFeedback, Keyboard } from "react-native";

export const HOCDismissKeyboard = ({ children }) => {
  return (
    <TouchableWithoutFeedback
      style={{ margin: 5 }}
      onPress={Keyboard.dismiss}
      accessible={false}
    >
      {children}
    </TouchableWithoutFeedback>
  );
};
  1. 於需要使用的頁面引入
import { HOCDismissKeyboard } from "../utils/HOCDismissKeyboard";
  1. 將他包在整個元件外面
    <HOCDismissKeyboard>
        // 元件內容
    </HOCDismissKeyboard>

Day 27 done 鍵盤部份到一段落!請大家多多指教


上一篇
[ 卡卡 DAY 26 ] - React Native 手機裝置 keyboard 之亂之鍵盤擋住元件與鍵盤點螢幕收起來
下一篇
[ 卡卡 DAY 28 ] - React Native 自製 radio button + textarea
系列文
卡卡30天學 React Native30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-12 18:30:19

第27天了! 恭喜即將完賽 (拍手!!!

謝謝/images/emoticon/emoticon18.gif 一起加油

我要留言

立即登入留言