如何使用react-native-paper修改TextInput样式并通过onblur收起键盘

1. 收起键盘 #

React Native 自带的 Keyboard API 可以直接实现键盘收起功能，以下是两种常用实现方式：

方式一：输入完成时自动收起 #

给 TextInput 添加 onSubmitEditing 回调，点击键盘的完成按钮时触发收起：

import { View, StyleSheet, Keyboard } from 'react-native';
import { TextInput } from 'react-native-paper';

const Input = () => {
  return (
    <TextInput
      style={styles.inputField}
      label='Email'
      mode='outlined'
      onSubmitEditing={() => Keyboard.dismiss()}
    />
  );
};

const styles = StyleSheet.create({
  inputField: {
    width: '100%',
  }
})

export default Input;

方式二：点击空白区域收起 #

用 TouchableWithoutFeedback 包裹输入框的父容器，点击空白处触发键盘收起：

import { View, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
import { TextInput } from 'react-native-paper';

const Input = () => {
  return (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      <View style={{width: '100%'}}>
        <TextInput
          style={styles.inputField}
          label='Email'
          mode='outlined'
        />
      </View>
    </TouchableWithoutFeedback>
  );
};

const styles = StyleSheet.create({
  inputField: {
    width: '100%',
  }
})

export default Input;

2. 在 onBlur 触发时禁用 onFocus #

通过状态变量控制 onFocus 的执行逻辑：当 onBlur 触发时设置禁用标记，后续 onFocus 触发时先判断标记，若处于禁用状态则直接返回。如果需要恢复触发，可根据业务场景添加恢复逻辑（比如点击输入框时重新启用）。

示例代码：

import { View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-paper';
import { useState } from 'react';

const Input = () => {
  const [isFocusDisabled, setIsFocusDisabled] = useState(false);

  const handleFocus = () => {
    if (isFocusDisabled) return;
    // 这里写原本需要在 onFocus 执行的逻辑
    console.log('输入框获得焦点');
  };

  const handleBlur = () => {
    // 触发 blur 时禁用 onFocus
    setIsFocusDisabled(true);
    // 可选：如果需要延迟恢复，可添加定时器
    // setTimeout(() => setIsFocusDisabled(false), 1500);
  };

  return (
    <TextInput
      style={styles.inputField}
      label='Email'
      mode='outlined'
      onFocus={handleFocus}
      onBlur={handleBlur}
      // 可选：点击输入框时强制恢复 onFocus 触发
      onPress={() => setIsFocusDisabled(false)}
    />
  );
};

const styles = StyleSheet.create({
  inputField: {
    width: '100%',
  }
})

export default Input;

内容的提问来源于stack exchange，提问作者Code