react-native-keyboard-controller

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

Android

iOS

Included in Expo Go

GitHub

npm

Bundled version:

1.20.4

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 及其使用的完整信息。