React Native如何修改键盘returnKey文本并绑定点击事件？

嘿，这个问题我熟！在React Native里调整输入框的返回键文本，同时给它绑定点击事件，只需要用好TextInput组件的两个核心属性就行，我给你一步步讲清楚：

1. 修改返回键文本 #

React Native的TextInput组件提供了两种方式控制返回键显示：

• 跨平台通用方案：returnKeyType
  这个属性接受预设值，不同平台会根据系统语言自动匹配对应的文本。常用值包括：

  • done → 中文显示“完成”/英文显示"Done"
  • go → “前往”/ "Go"
  • search → “搜索”/ "Search"
  • send → “发送”/ "Send"
  • next → “下一步”/ "Next"

• iOS专属自定义：returnKeyLabel
  如果需要完全自定义返回键文本（比如改成“提交表单”），可以用这个属性，但注意Android不支持，Android端仍会遵循returnKeyType的设置。

2. 绑定返回键点击事件 #

用onSubmitEditing属性就能绑定返回键触发的函数，这个回调只会在用户点击返回键时执行，不会因为输入框失焦触发。如果需要点击后保持输入框聚焦，可以把blurOnSubmit设为false（默认是true，点击后输入框会自动失焦）。

完整代码示例 #

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

export default function CustomReturnKeyDemo() {
  const [inputValue, setInputValue] = useState('');

  // 自定义返回键点击处理函数
  const handleReturnKeyPress = () => {
    alert(`返回键已触发！输入内容：${inputValue}`);
    // 在这里写入你的业务逻辑，比如提交表单、发起搜索、页面跳转等
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={inputValue}
        onChangeText={setInputValue}
        // 跨平台设置返回键类型（中文显示“完成”）
        returnKeyType="done"
        // iOS专属：自定义返回键文本，注释掉则使用returnKeyType的默认文本
        // returnKeyLabel="提交内容"
        // 绑定返回键点击事件
        onSubmitEditing={handleReturnKeyPress}
        // 可选：点击返回键后保持输入框聚焦
        blurOnSubmit={false}
        placeholder="请输入内容"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  input: {
    height: 45,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 6,
    paddingHorizontal: 12,
  },
});

额外注意事项 #

• Android端无法通过React Native的API自定义返回键文本，只能使用returnKeyType对应的系统预设文本；如果非要完全自定义，需要修改Android原生项目的主题配置（比如在res/values/styles.xml中调整android:imeOptions和android:actionDoneLabel）。
• 如果输入框设置为多行模式（multiline={true}），返回键会自动变成换行键，此时onSubmitEditing不会触发，需要通过其他方式（比如添加独立的提交按钮）处理提交逻辑。

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