This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 55).

react-native-keyboard-controller

一个提供键盘管理器的库，在 Android 和 iOS 上以相同的方式工作

Android

iOS

Included in Expo Go

GitHub

npm

react-native-keyboard-controller 提供了超出 React Native 内置键盘 API 的额外功能，以最少的配置在 Android 和 iOS 上提供一致性，并带来用户所期望的原生体验。

安装

Terminal

- npx expo install react-native-keyboard-controller

If you are installing this in an existing React Native app, make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

使用

KeyboardController

import { TextInput, View, StyleSheet } from 'react-native';
import { KeyboardAwareScrollView, KeyboardToolbar } from 'react-native-keyboard-controller';

export default function FormScreen() {
  return (
    <>
      <KeyboardAwareScrollView bottomOffset={62} contentContainerStyle={styles.container}>
        <View>
          <TextInput placeholder="输入消息..." style={styles.textInput} />
          <TextInput placeholder="输入消息..." style={styles.textInput} />
        </View>
        <TextInput placeholder="输入消息..." style={styles.textInput} />
        <View>
          <TextInput placeholder="输入消息..." style={styles.textInput} />
          <TextInput placeholder="输入消息..." style={styles.textInput} />
          <TextInput placeholder="输入消息..." style={styles.textInput} />
        </View>
        <TextInput placeholder="输入消息..." style={styles.textInput} />
      </KeyboardAwareScrollView>
      <KeyboardToolbar />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 16,
    padding: 16,
  },
  listStyle: {
    padding: 16,
    gap: 16,
  },
  textInput: {
    width: 'auto',
    flexGrow: 1,
    flexShrink: 1,
    height: 45,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#d8d8d8',
    backgroundColor: '#fff',
    padding: 8,
    marginBottom: 8,
  },
});

其他资源

高级键盘处理

了解使用 Keyboard Controller 进行高级键盘处理示例的更多信息

访问官方文档

获取有关 API 及其用法的完整信息。