React Native iOS TextInput：按空格无法从数字标点键盘切回默认键盘

在iOS设备上使用React Native的TextInput组件时，切换到数字标点键盘后按下空格，键盘无法切回默认的字符键盘。示例代码如下：

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

export default function App() {
  const [inputVal, setInputVal] = useState('')

  return (
    <View style={styles.container}>
      <TextInput style={styles.input} value={inputVal} onChangeText={text => setInputVal(text)} />
    </View>
  );
}

目前发现添加multiline={true}可解决该问题，但业务场景不适合使用多行输入，需要其他实现方式。

方案1：监听空格输入，动态切换键盘类型 #

通过检测输入内容中的空格，临时切换键盘类型再切回默认，触发iOS键盘的类型切换：

import React, { useState, useRef } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native';

export default function App() {
  const [inputVal, setInputVal] = useState('')
  const [keyboardType, setKeyboardType] = useState('default')
  const inputRef = useRef(null)

  const handleTextChange = (text) => {
    setInputVal(text)
    // 检测是否输入了空格
    if (text.endsWith(' ')) {
      // 临时切换到数字键盘，再立刻切回默认
      setKeyboardType('numeric')
      setTimeout(() => {
        setKeyboardType('default')
        // 聚焦输入框确保键盘切换生效
        inputRef.current?.focus()
      }, 10)
    }
  }

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        style={styles.input}
        value={inputVal}
        onChangeText={handleTextChange}
        keyboardType={keyboardType}
      />
    </View>
  );
}

方案2：模拟单行的多行输入 #

开启multiline={true}，但通过样式和事件限制其行为为单行：

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

export default function App() {
  const [inputVal, setInputVal] = useState('')

  const handleTextChange = (text) => {
    // 禁止输入换行符，保持单行
    const filteredText = text.replace(/\n/g, '')
    setInputVal(filteredText)
  }

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.singleLineInput}
        value={inputVal}
        onChangeText={handleTextChange}
        multiline={true}
        // 隐藏换行相关的键盘按钮
        returnKeyType="done"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  singleLineInput: {
    height: 40, // 固定高度模拟单行
    borderWidth: 1,
    paddingHorizontal: 10,
  },
})

方案3：使用第三方键盘管理库 #

借助react-native-keyboard-manager库调用原生方法切换键盘类型：
首先安装依赖：

npm install react-native-keyboard-manager --save

然后在代码中实现：

import React, { useState, useRef } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native';
import KeyboardManager from 'react-native-keyboard-manager';

export default function App() {
  const [inputVal, setInputVal] = useState('')
  const inputRef = useRef(null)

  const handleTextChange = (text) => {
    setInputVal(text)
    if (text.endsWith(' ')) {
      // 调用原生方法切换回默认键盘
      KeyboardManager.setKeyboardType('default')
      inputRef.current?.focus()
    }
  }

  return (
    <View style={styles.container}>
      <TextInput
        ref={inputRef}
        style={styles.input}
        value={inputVal}
        onChangeText={handleTextChange}
      />
    </View>
  );
}

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