React Native使用react-native-keyboard-controller时输入框无法紧贴键盘顶部

使用react-native-keyboard-controller库的KeyboardStickyView组件时，文本输入框随键盘上移但始终和键盘顶部有间隙；此前用KeyboardAvoidingView可实现紧贴效果，但添加SafeAreaView后失效，且该组件在Android上表现不佳。

相关代码：

import { StyleSheet } from "react-native";

import { View } from "@/components/Themed";
import { TextInput } from "react-native";
import {
  KeyboardStickyView,
  KeyboardProvider,
} from "react-native-keyboard-controller";

export default function TabFourScreen() {
  return (
    <KeyboardProvider>
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}></View>
        <KeyboardStickyView>
          <TextInput
            style={styles.textInput}
            placeholder="Type a message..."
          ></TextInput>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderColor: "black",
    borderWidth: 5,
    width: "100%",
    padding: 20,
    borderRadius: 10,
  },
});

1. 抵消SafeAreaView底部内边距 #

间隙通常来自SafeAreaView自动添加的底部内边距，可通过react-native-safe-area-context的useSafeAreaInsets获取内边距值，手动抵消：

• 导入useSafeAreaInsets：

  import { useSafeAreaInsets } from 'react-native-safe-area-context';
  

• 在组件中获取内边距，并给KeyboardStickyView添加负margin：

  const insets = useSafeAreaInsets();
  
  // ...
  
  <KeyboardStickyView style={{ marginBottom: -insets.bottom }}>
  

2. 配置Android窗口软输入模式 #

确保AndroidManifest.xml中对应Activity的windowSoftInputMode设置为adjustResize，这是react-native-keyboard-controller正常工作的必要配置：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">

3. 清理额外样式 #

检查输入框或父组件是否有额外的margin/padding导致间隙，确保TextInput的margin设为0：

textInput: {
  // ... 原有样式
  margin: 0,
}

import { StyleSheet } from "react-native";
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { View } from "@/components/Themed";
import { TextInput } from "react-native";
import {
  KeyboardStickyView,
  KeyboardProvider,
} from "react-native-keyboard-controller";

export default function TabFourScreen() {
  const insets = useSafeAreaInsets();
  
  return (
    <KeyboardProvider>
      <View style={{ flex: 1 }}>
        <View style={{ flex: 1 }}></View>
        <KeyboardStickyView style={{ marginBottom: -insets.bottom }}>
          <TextInput
            style={styles.textInput}
            placeholder="Type a message..."
          ></TextInput>
        </KeyboardStickyView>
      </View>
    </KeyboardProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textInput: {
    borderColor: "black",
    borderWidth: 5,
    width: "100%",
    padding: 20,
    borderRadius: 10,
    margin: 0,
  },
});

内容的提问来源于stack exchange，提问作者F23