[ 卡卡 DAY 27 ] - React Native keyboard 之乱之按萤幕就收键盘

若是键盘没有之前教的设定 next 与 go 的机制
打完字过後键盘就会收不起来
这边来跟大家分享一个叫做 TouchableWithoutFeedback 的 RN 元件
在手机装置打完字後，点击萤幕就可以将键盘收起来
一起让使用者有良好的体验吧！

使用时机

有使用 input 系列元件，凡是会有键盘出现的 screens 都可以使用！

使用方法

1. 在有使用 input 的 screen 引入元件

import { TouchableWithoutFeedback, Keyboard } from "react-native";

2. 在元件最外层包上

    <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>
  );
};

2. 於需要使用的页面引入

import { HOCDismissKeyboard } from "../utils/HOCDismissKeyboard";

3. 将他包在整个元件外面

    <HOCDismissKeyboard>
        // 元件内容
    </HOCDismissKeyboard>

Day 27 done 键盘部份到一段落！请大家多多指教