Question

我希望您能解决我遇到的问题。我使用FlatList创建了一个聊天启动程序，其中用户需要通过更改组件来回答问题。在需要通过API到GooglePlaces的地址的组件之后，FlatList无法正确计算屏幕高度，因此在下一个组件下隐藏了一部分屏幕。我在组件的每个开关中使用UseEffect，以使列表滚动到末尾。 API请求后，它无法正常运行。有没有人以前经历过，知道如何解决问题？乐意使用您的帮助。

我的FlatList组件：

<SafeAreaView style={{ flex: 1, justifyContent: 'space-between' }}>
  <Header />

  <FlatList
    ref={flatList}
    onContentSizeChange={() => flatList.current.scrollToEnd({ animated: true })}
    onLayout={() => {
      flatList.current.scrollToEnd({ animated: true });
    }}
    data={messages}
    refreshing={true}
    onRefresh={() => flatList.current.scrollToEnd({ animated: true })}
    keyExtractor={message => uuidv4()}
    renderItem={({ item, index }) => {
      return (
        item.sender === 'image' ?
          <Image
            source={{ uri: item.text }}
            style={{ height: 150, width: 248, marginVertical: 10, alignSelf: 'flex-start', marginStart: 35 }}
            onLoadEnd={() => setRefreshing(true)}
          />
          : <Chat
            isMale={isMale}
            showAvatar={
              messages[index - 1]
                ? item.sender !== messages[index - 1].sender
                : true
            }
            text={item.text}
            sender={item.sender}
            isNext={messages[index + 1]
              ? item.sender === messages[index + 1].sender
              : false
            }
            currentObject={item.index}
            onUpdate={(object) => {
              setUpdate(currentObject)
              setCurrentObject(object)
            }}
          />
      );
    }}
    style={{ flexGrow: 1 }}
  />


  <KeyboardAvoidingView style={{ marginTop: 15, position: 'relative', justifyContent: 'flex-end', }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>

    {putAnswerOptions()}

  </KeyboardAvoidingView>

</SafeAreaView>

我的使用效果：

useEffect(() => {
if (messages.length === 0) {
  setMessages(currentObject.avatar);
} else {
  update ? setMessages([...messages, currentObject.avatar[currentObject.avatar.length - 1]]) : setMessages([...messages, ...currentObject.avatar]);
}

flatList.current.scrollToEnd({ animated: true })
 }, [currentObject]);

列表的呈现方式：

列表应如何呈现：

FlatList不正确计算高度

0 个答案: