You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Android端Gifted Chat组件InputToolbar键盘弹出时位置异常求助

Android端Gifted Chat键盘弹出时InputToolbar位置异常问题

Android端使用Gifted Chat组件时,遇到键盘弹出状态下InputToolbar位置异常的问题:

  • 给InputToolbar添加marginBottom会导致内部textInput位置偏移;
  • 调整textInput的margin又会影响InputToolbar整体布局;
  • 键盘关闭后重新打开,所有设置的marginBottom全部失效。
    iOS设备无此问题。

截图说明

  • 键盘弹出无margin时的位置:Position keyboard visible without margin
  • 给InputToolbar加margin后的位置:Position keyboard visible with InputToolbar margin
  • 给textInput加margin后的位置:Position keyboard visible with textInput margin

相关代码

<View style={{backgroundColor: backgroundColor, flex: 1}}>
    <GiftedChat
      messages={messages}
      onSend={handleSend}
      renderSend={renderSend}
      user={mapUser(auth.currentUser)}
      loadEarlier={loadEarlier}
      isLoadingEarlier={isLoadingEarlier}
      isTyping={typing != null} 
      onLoadEarlier={handleLoadEarlier}
      onInputTextChanged={handleInputTextChanged}
      renderBubble={renderBubble}
      bottomOffset={-10}
      listViewProps={{
        keyboardDismissMode: "on-drag"
        }}
      style={{backgroundColor: backgroundColor}}
      renderFooter={renderFooter}
      list
      renderInputToolbar={(props) => (
        <InputToolbar
          {...props}
          containerStyle={{
            backgroundColor: '#F4F4F4',
            marginLeft: 15,
            marginRight: 15,
            marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 35) : (Platform.OS === 'android' ? 10 : 35),
            borderColor: 'grey',
            height:44,
            borderRadius: 25
          }}
          textInputStyle={{
            color: '#333333',
            marginBottom: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 40) : 40,
            fontSize: 14,
            fontFamily: 'Roboto-medium',
          }}
          placeholder="Votre message ..."
        />
      )}
      renderChatFooter={() => (
        <View style={{marginVertical: isKeyboardVisible ? (Platform.OS === 'android' ? 0 : 0) : (Platform.OS === 'android' ? 5 : 20)}}/> // 20
      )}
    />
  </View>

已尝试调整不同的marginBottom值,问题未解决。

内容的提问来源于stack exchange,提问作者KarimK3

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.14 10:02:52