react-native-keyboard-controller

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

Android

iOS

Included in Expo Go

GitHub

npm

Bundled version:

1.18.5

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