react-native-keyboard-controller

一个提供 Keyboard 管理器的库，可在 Android 和 iOS 上以相同的方式运行

Android

iOS

Included in Expo Go

GitHub

npm

Recommended version:

1.22.4

react-native-keyboard-controller 提供了超越 React Native 内置键盘 API 的更多功能，只需进行最少的配置，即可在 Android 和 iOS 上保持一致，并带来用户期待的原生体验。

安装

Terminal

- npx expo install react-native-keyboard-controller

- yarn expo install react-native-keyboard-controller

- pnpm expo install react-native-keyboard-controller

- bun 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="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,
  },
});

react-native-keyboard-controller

安装

用法

更多资源