点击TextInput弹出键盘时Android UI适配异常问题求助

问题描述 #

当前代码在iOS平台点击TextInput弹出键盘时UI表现正常，但在Android平台存在适配问题：键盘弹出时输入框或消息列表被遮挡，尝试使用KeyboardAvoidingView并设置behavior="padding"或"height"均未生效。

原代码如下：

return (
        <View style={{
          flex: 1,
          backgroundColor: this.state.changeThemeSwitch ?
            helpers.whiteColor() : helpers.blackColor(),
          marginBottom: 10,
        }}>
          <CustomStatusBar />
          {this.renderHeader()}
          <View style={{
            justifyContent: "flex-end", alignItems: "flex-end",
            flex: 1,
          }}>

            <View
              style={{
                alignSelf: "flex-end",
                justifyContent: "flex-end", flexDirection: 'column',
                marginBottom: this.state.parentViewTopMargin,
                width: "100%",
              }}>

              <ScrollView
                ref={(ref) => this.scrollViewRef = ref}
                onLayout={() => {

                  if (this.scrollViewRef) {
                    this.scrollViewRef.scrollToEnd({ animated: false })
                  }
                }}
                keyboardShouldPersistTaps="handled">

                {messages &&
                  messages.map((item, index) =>
                    this.renderItem(item, index))}

              </ScrollView>

              <View style={{ ...styles.inputContainer }}>
                <TouchableOpacity onPress={this.showKeyboard}>
                  <FontAwesomeIcon
                    icon={faMicrophone}
                    size={30}
                    style={{
                      color: "#3A913F",
                    }}>
                  </FontAwesomeIcon>
                </TouchableOpacity>
                <TextInput ref={this.inputRef}
                  keyboardType='default'
                  multiline
                  style={{
                    flex: 1,
                    marginLeft: 10,
                    backgroundColor: this.state.changeThemeSwitch ? helpers.whiteColor() : helpers.blackColor(),
                    color: this.state.changeThemeSwitch ? helpers.blackColor() : helpers.whiteColor(),
                    borderRadius: 6,
                    paddingHorizontal: 16,
                    paddingVertical: 8,
                    marginRight: 10,
                    borderWidth: 1.5,
                    borderColor: "#3A913F"
                  }}
                  placeholder="Type your query..."
                  placeholderTextColor={this.state.changeThemeSwitch
                    ? helpers.blackColor()
                    : helpers.whiteColor()}
                  value={message}
                  onChangeText={(text) => this.setState({ message: text })}
                />
                <TouchableOpacity onPress={this.handleSend}>
                  <FontAwesomeIcon
                    icon={faPaperPlaneTop}
                    size={30}
                    style={{
                      color: "#3A913F",
                    }}>
                  </FontAwesomeIcon>
                </TouchableOpacity>
              </View>

            </View>
          </View>
        </View>
      );

解决方案 #

1. 正确使用KeyboardAvoidingView并调整布局层级 #

Android上KeyboardAvoidingView的behavior属性需配合flex布局生效，且要包裹会被键盘影响的核心区域（消息列表+输入框），而非整个页面。修改后的布局结构如下：

import { KeyboardAvoidingView, Platform } from 'react-native';

return (
  <View style={{
    flex: 1,
    backgroundColor: this.state.changeThemeSwitch ? helpers.whiteColor() : helpers.blackColor(),
  }}>
    <CustomStatusBar />
    {this.renderHeader()}
    {/* 用KeyboardAvoidingView包裹消息列表和输入框区域 */}
    <KeyboardAvoidingView
      style={{ flex: 1 }}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      keyboardVerticalOffset={Platform.OS === 'android' ? 20 : 0} // 调整偏移量适配Android状态栏/导航栏
    >
      <View style={{
        justifyContent: "flex-end",
        flex: 1,
        width: "100%",
      }}>
        <View
          style={{
            justifyContent: "flex-end",
            flexDirection: 'column',
            width: "100%",
            // 移除手动设置的marginBottom，交由KeyboardAvoidingView处理偏移
          }}>
          <ScrollView
            ref={(ref) => this.scrollViewRef = ref}
            onLayout={() => {
              if (this.scrollViewRef) {
                this.scrollViewRef.scrollToEnd({ animated: false })
              }
            }}
            keyboardShouldPersistTaps="handled"
            style={{ flex: 1 }} // 给ScrollView添加flex:1确保占满剩余空间
          >
            {messages && messages.map((item, index) => this.renderItem(item, index))}
          </ScrollView>

          <View style={{ ...styles.inputContainer }}>
            <TouchableOpacity onPress={this.showKeyboard}>
              <FontAwesomeIcon
                icon={faMicrophone}
                size={30}
                style={{ color: "#3A913F" }}
              />
            </TouchableOpacity>
            <TextInput
              ref={this.inputRef}
              keyboardType='default'
              multiline
              style={{
                flex: 1,
                marginLeft: 10,
                backgroundColor: this.state.changeThemeSwitch ? helpers.whiteColor() : helpers.blackColor(),
                color: this.state.changeThemeSwitch ? helpers.blackColor() : helpers.whiteColor(),
                borderRadius: 6,
                paddingHorizontal: 16,
                paddingVertical: 8,
                marginRight: 10,
                borderWidth: 1.5,
                borderColor: "#3A913F"
              }}
              placeholder="Type your query..."
              placeholderTextColor={this.state.changeThemeSwitch ? helpers.blackColor() : helpers.whiteColor()}
              value={message}
              onChangeText={(text) => this.setState({ message: text })}
            />
            <TouchableOpacity onPress={this.handleSend}>
              <FontAwesomeIcon
                icon={faPaperPlaneTop}
                size={30}
                style={{ color: "#3A913F" }}
              />
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </KeyboardAvoidingView>
  </View>
);

2. 配置AndroidManifest软键盘模式 #

在android/app/src/main/AndroidManifest.xml中，给对应Activity添加windowSoftInputMode属性，确保键盘弹出时页面正确调整：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
  <!-- 其他属性保持不变 -->
</activity>

3. 优化ScrollView滚动逻辑 #

监听键盘弹出事件，自动滚动到消息列表底部，确保最新消息可见：

import { Keyboard } from 'react-native';

componentDidMount() {
  this.keyboardDidShowListener = Keyboard.addListener(
    'keyboardDidShow',
    this._keyboardDidShow
  );
}

componentWillUnmount() {
  this.keyboardDidShowListener.remove();
}

_keyboardDidShow = () => {
  if (this.scrollViewRef) {
    this.scrollViewRef.scrollToEnd({ animated: true });
  }
};

4. 移除冲突的margin设置 #

删除原根View的marginBottom:10，以及手动控制的parentViewTopMargin，避免干扰系统组件的适配计算。

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