react-native-gifted-chat 作曲家覆盖的最后一个气泡答案

【问题标题】：react-native-gifted-chat last bubble coveredby composerreact-native-gifted-chat 作曲家覆盖的最后一个气泡
【发布时间】：2022-09-30 21:18:35
【问题描述】：

当我尝试通过它的填充提升作曲家时，最后一个聊天气泡被它覆盖，那么我应该怎么做才能在最后一个气泡和作曲家之间留出空间？我试图寻找答案，但没有找到与此类问题相关的任何内容

   const renderInputToolbar = (props) => {
    return (
      <InputToolbar
        {...props}
        containerStyle={{ borderTopWidth: 0, paddingVertical: 12 }}
      />
    );
  };


const renderComposer = (props) => {
    return (
      <Composer
        {...props}
        textInputProps={{
          onFocus: () => setOnFocus(true),
          onBlur: () => setOnFocus(false),
          marginHorizontal: 12,
          blurOnSubmit: true,
          paddingVertical: 12,
          paddingHorizontal: 15,
          backgroundColor: onFocus ? \"#F1E9FD\" : \"#fff\",
          borderRadius: 60,
          borderColor: onFocus ? \"#7210FF\" : \"#c0c0c0\",
          borderWidth: 1,
          width: \"80%\",
        }}
      ></Composer>
    );
  };


<GiftedChat
        messages={messages}
        showUserAvatar={false}
        renderBubble={renderBubble}
        renderInputToolbar={renderInputToolbar}
        renderComposer={renderComposer}
        renderActions={renderActions}
        renderSend={renderSend}
        alwaysShowSend
        
        user={{ _id: userID, name: username, avatar: avatar }}
        onSend={(messages) => handleSend(messages)}
      />

标签： javascript react-native react-native-gifted-chat

【解决方案1】：

嘿 CCP 你能试试这个吗？

<GiftedChat
        messages={messages}
        showUserAvatar={false}
        renderBubble={renderBubble}
        renderInputToolbar={renderInputToolbar}
        renderComposer={renderComposer}
        renderActions={renderActions}
        renderSend={renderSend}
        alwaysShowSend
        bottomOffset={100} // this
        user={{ _id: userID, name: username, avatar: avatar }}
        onSend={(messages) => handleSend(messages)}
      />

希望能帮助到你

【讨论】：

谢谢，但它不起作用，没有任何变化

【解决方案2】：

解决了

通过在 renderFooter 中添加框高度找到了解决方案

     const renderFooter = (props) => {
    return <Box {...props} height={6} />;
  };



<GiftedChat
            messages={messages}
            renderBubble={renderBubble}
            renderInputToolbar={renderInputToolbar}
            renderComposer={renderComposer}
            renderActions={renderActions}
            renderSend={renderSend}
            renderDay={renderDay}
            renderFooter={renderFooter} // THIS
            alwaysShowSend
            user={{ _id: userID, name: username, avatar: avatar }}
            onSend={(messages) => handleSend(messages)}
          />

【讨论】：

【解决方案3】：

我确实遇到了这个问题，但除了

const renderChatFooter = () => {
    return(
      <View style={{height:20}}></View>
    )
}

接着

<GiftedChat
  ...
  renderChatFooter={renderChatFooter} // THIS
  ...
/>

【讨论】：