React-Native中TextInput弹出键盘后出现空白问题求助

问题详情 #

在Android端使用横向ScrollView包裹TextInput组件时，弹出软键盘后，输入框之间会出现异常空白区域。尝试过KeyboardAvoidingView和KeyboardAwareScrollView均无效，核心原因是ScrollView为横向布局。

当前依赖版本 #

• React 17.0.2
• React-Native 0.66.3
• React-Navigation 5.9.8

相关代码 #

页面代码 #

return (
<SafeAreaView>
  <KeyboardAvoidingView
    style={styles.keyboard}
    enable
    //keyboardVerticalOffset={50}
    behavior={Platform.OS === "ios" ? "padding" : "height"}>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          horizontal={true}
          pagingEnabled={true}
          showsHorizontalScrollIndicator={true}
          scrollIndicatorInsets={{ top: 10, left: 10, bottom: 10, right: 10 }} // ios
        >
          <View style={styles.container}>
            <View>
              <Image
                style={styles.icon}
                source={require("../images/icon/folder.jpg")}
              />
            </View>
            <View style={styles.input1}>
              <TextInput
                style={styles.input}
                placeholder="Name"
              />
              <TextInput
                style={styles.input}
                placeholder="Reference"
              />
              <TextInput
                style={styles.input}
                placeholder="Code"
              />
            </View>
          </View>

样式代码 #

container: {
 width: screenWidth,
 alignItems: "center",
 backgroundColor: "#FAFBFB",
 height: screenHeight
},
keyboard: {
 flex: 1
},
input: {
 marginBottom: "10%"
},
input1: {
 flex: 2,
 justifyContent: "center",
 alignContent: "center",
 width: "80%",
 paddingBottom: "15%",
 marginBottom: "10%"
},

解决方案尝试 #

1. 替换百分比间距为固定DP值 #

当前输入框使用百分比单位设置间距，Android键盘弹出时布局重绘会导致百分比计算异常，换成固定DP值可避免这个问题：

input: {
  marginBottom: 16 // 替换为固定dp值，根据需求调整
},
input1: {
  flex: 2,
  justifyContent: "center",
  alignContent: "center",
  width: "80%",
  paddingBottom: 24, // 替换固定值
  marginBottom: 16
},

2. 修改AndroidManifest窗口调整属性 #

在android/app/src/main/AndroidManifest.xml中修改对应Activity的windowSoftInputMode，阻止系统自动调整窗口：

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

注意：该设置可能导致部分内容被键盘遮挡，需确保横向ScrollView可正常滚动到输入区域。

3. 手动监听键盘事件动态调整布局 #

利用React Native的Keyboard API监听键盘状态，动态修改输入框间距：

import { Keyboard, useState, useEffect } from 'react-native';

// 组件内定义状态和监听
const [inputMargin, setInputMargin] = useState(16);

useEffect(() => {
  const showListener = Keyboard.addListener('keyboardDidShow', () => {
    setInputMargin(8); // 键盘弹出时缩小间距
  });
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    setInputMargin(16); // 收起时恢复
  });

  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

// 渲染TextInput时使用动态样式
<TextInput
  style={[styles.input, { marginBottom: inputMargin }]}
  placeholder="Name"
/>

4. 固定横向ScrollView的内容容器高度 #

给横向ScrollView添加contentContainerStyle固定高度，避免键盘弹出时内容高度被拉伸：

<ScrollView
  contentInsetAdjustmentBehavior="automatic"
  horizontal={true}
  pagingEnabled={true}
  showsHorizontalScrollIndicator={true}
  scrollIndicatorInsets={{ top: 10, left: 10, bottom: 10, right: 10 }}
  contentContainerStyle={{ height: Dimensions.get('window').height }} // 固定内容高度
>

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