React Native Gifted Chat：键盘与输入工具栏间多余空白问题求助

使用React Native Gifted Chat时，键盘与输入工具栏之间有时会出现空白间隙。当前使用Expo Router实现Tab导航，且在此页面隐藏了底部Tab栏。已尝试多种方案但问题仍未解决，即使显示底部Tab栏，间隙依然存在。

以下是页面的render函数代码：

return (
  <ImageBackground
    source={assets ? assets[0] : backroundPattern}
    style={{ flex: 1, marginBottom: insets.bottom, backgroundColor: Colors.background }}
  >
    <Stack.Screen
      options={{
        headerTitle: () => <Header />,
      }}
    />
    {carGroups && carGroups.length > 0 ? (
      <View style={styles.carGroupWrapper}>
        <FlatList<CometChat.Conversation>
          data={carGroups}
          style={{ paddingHorizontal: 10, paddingVertical: 5 }}
          keyExtractor={(item: unknown) => {
            const conversation = item as CometChat.Conversation;
            return conversation.getConversationId();
          }}
          renderItem={horizontalRenderItem}
          horizontal
          showsHorizontalScrollIndicator={false}
        />
      </View>
    ) : null}
    {groupMembers && groupMembers.length > 0 ? (
      <View style={styles.carGroupWrapper}>
        {groupMembers.map((member) => {
          const memberUID = member.getUid();
          if (memberUID === user?.id) {
            return null;
          }
          return (
            <Pressable style={{ flexDirection: "row", alignItems: "center", padding: 10 }}>
              <View style={{ width: 40, height: 40 }}>
                <Avatar userId={member.getUid()} />
              </View>
              <Text style={{ marginLeft: 10 }}>{member.getName()}</Text>
            </Pressable>
          );
        })}
      </View>
    ) : null}
    {isGalleryVisible && selectedImage && (
      <Gallery
        images={[{ url: selectedImage, imageIndex: 0 }]}
        isVisible={isGalleryVisible}
        onClose={onGalleryClose}
        setSelectedIndex={() => {}}
        selectedIndex={0}
      />
    )}
    <GiftedChat
      isTyping={isTyping}
      messages={messages}
      alignTop
      scrollToBottom
      scrollToBottomComponent={() => <Text>V</Text>}
      onSend={(messages: IMessage[]) => {
        onSend(messages, text);
        playSound();
      }}
      user={{ _id: 1, name: user?.name }}
      onInputTextChanged={(text) => {
        setText(text);
        if (text.length > 0) {
          startTyping(userId, context);
        } else if (text.length === 0) {
          endTyping(userId, context);
        }
      }}
      messagesContainerStyle={{
        paddingTop:
          carGroups && carGroups.length > 0
            ? 100
            : groupMembers && groupMembers.length > 0
            ? 60
            : 0,
      }}
      bottomOffset={insets.bottom}
      renderAvatar={null}
      minInputToolbarHeight={45}
      maxComposerHeight={100}
      infiniteScroll
      loadEarlier={hasMore}
      isLoadingEarlier={loadingMore}
      renderMessageImage={(props) => (
        <MessageImage
          {...props}
          isVisible={isGalleryVisible}
          onOpen={() => {
            if (props.currentMessage?.image) onGalleryOpen(props.currentMessage?.image);
          }}
          onClose={onGalleryClose}
        />
      )}
      renderMessageVideo={MessageVideo}
      onLoadEarlier={() => {
        fetchMessages();
      }}
      keyboardShouldPersistTaps="handled"
      renderSystemMessage={SystemMessageText}
      renderBubble={(props) => {
        return <Bubble {...props} />;
      }}
      renderDay={(props: DayProps<IMessage>) => <Day {...props} />}
      renderMessageText={MessageText}
      renderSend={(props) => (
        <View style={styles.sendContainer}>
          {text.length > 0 && (
            <Send {...props} containerStyle={{ justifyContent: "center" }}>
              <Ionicons name="send" color={Colors.primary} size={28} />
            </Send>
          )}
          {text.length === 0 && (
            <Pressable onPress={onShowActionSheet}>
              <Ionicons name="camera-outline" color={Colors.primary} size={28} />
            </Pressable>
          )}
        </View>
      )}
      // It's there in the docs and it works, but it's not in the types
      renderTicks={RenderTicks}
      textInputProps={styles.composer}
      renderTime={RenderTime}
      listViewProps={{ keyboardDismissMode: "on-drag" }}
      renderInputToolbar={(props) => (
        <InputToolbar
          {...props}
          containerStyle={{ backgroundColor: Colors.background }}
          renderComposer={(props) => (
            <Composer
              {...props}
              textInputProps={{
                ...props,
                maxFontSizeMultiplier: 1.3,
              }}
              textInputStyle={styles.inputStyle}
            />
          )}
        />
      )}
      parsePatterns={(linkStyle) => [
        {
          type: "url",
          style: { ...linkStyle, textDecorationLine: "underline" },
          onPress: (url: string) => Linking.openURL(url),
        },
      ]}
      renderFooter={() => <TypingIndicator isTyping={isTyping} />}
    />
  </ImageBackground>
);

问题截图 #

• iOS端：
• Android端：

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