react-native-keyboard-controller

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

Android

iOS

Included in Expo Go

Bundled version:

1.18.5

react-native-keyboard-controller 提供了超出内置 React Native 键盘 API 的额外功能，在 Android 和 iOS 上实现了一致性，只需最少配置，同时为用户提供预期的原生体验。

安装

🌐 Installation

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.

用法

🌐 Usage

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="Type a message..." style={styles.textInput} />
          <TextInput placeholder="Type a message..." style={styles.textInput} />
        </View>
        <TextInput placeholder="Type a message..." style={styles.textInput} />
        <View>
          <TextInput placeholder="Type a message..." style={styles.textInput} />
          <TextInput placeholder="Type a message..." style={styles.textInput} />
          <TextInput placeholder="Type a message..." style={styles.textInput} />
        </View>
        <TextInput placeholder="Type a message..." 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,
  },
});

其他资源

🌐 Additional resources

高级键盘处理

了解有关使用键盘控制器的高级键盘操作示例的更多信息

访问官方文档

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