如何在react-native中的iOS键盘上添加“完成”按钮

Question

我正在开发一个 React Native 应用程序，我需要在 iOS 键盘上方添加一个“完成”按钮。目标是为用户提供一种在完成输入后关闭键盘的简单方法，而不是依赖默认行为。

我希望按钮出现在键盘正上方，类似于自定义工具栏。当用户点击“完成”时，键盘应该关闭。我正在专门寻找一种仅适用于 iOS 的解决方案，因为 iOS 允许添加自定义输入附件视图。

我正在寻找一种可以实现如下目标的解决方案：

Answer 1

要在 React Native 中的 iOS 键盘上方添加“完成”按钮，您可以使用原生 iOS 组件

InputAccessoryView

。这允许您在键盘正上方显示自定义视图，例如按钮。

以下是如何使用

inputAccessoryViewID

属性将输入字段链接到附件视图来实现此目的：

解决方案： 为您的输入字段分配一个唯一的

inputAccessoryViewID

。 使用 InputAccessoryView 添加自定义“完成”按钮，按下该按钮会关闭键盘。

import React, { useState } from 'react';
import { View, TextInput, Button, InputAccessoryView, Keyboard, Platform } from 'react-native';

const MyComponent = () => {
  const [inputValue, setInputValue] = useState('');
  const inputAccessoryViewID = 'uniqueID'; // Unique ID for accessory view

  const handleDonePress = () => {
    Keyboard.dismiss(); // Dismiss the keyboard when the Done button is pressed
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 20 }}>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1,
          padding: 10,
          marginBottom: 20
        }}
        value={inputValue}
        onChangeText={setInputValue}
        placeholder="Enter text"
        returnKeyType="done"
        inputAccessoryViewID={inputAccessoryViewID} // Link input to accessory view
      />

      {/* InputAccessoryView for iOS */}
      {Platform.OS === 'ios' && (
        <InputAccessoryView nativeID={inputAccessoryViewID}>
          <View style={{ backgroundColor: 'lightgray', padding: 10, alignItems: 'flex-end' }}>
            <Button onPress={handleDonePress} title="Done" />
          </View>
        </InputAccessoryView>
      )}
    </View>
  );
};

export default MyComponent;