Question

我正在与React原住民一道开展聊天室项目。因此,我希望我的最新信息能够在底层和每当页重载时显示,滚动屏障将首先在底层,用户可以从底层向上滚。

我可以通过以下途径这样做:maxHala: 100dvh和flexDirection:一栏逆 with React and CSS on the web,但我可以在网上与Reactindigenous实现同一行为。

The React + CSS demo: https://codesand Box.io/s/chat-room-web-clxqz2?file=/src/App.tsx

https://snack.expo.dev/@snow_yang/chat-room” rel=“nofollow noreferer”>。

如果你们当中有些人有任何想法,那就是一个很大的希望!

Answer 1

如果你想把<代码>FlatList的底线滚动,你可尝试使用<代码>scrollToEnd( ref。在<代码>FlatList之后,或者在添加新电文后,你可以使用这种方法。您也可使用推进代码<>onContentSizeChange,以便在内容大小发生变化时启动滚动。

例如:

import React, { useEffect, useRef } from  react ;
import { View, Text, FlatList, StyleSheet } from  react-native ;

const MessageView = () => {
  const messages = [...];

  const flatListRef = useRef();

  useEffect(() => {
    if (flatListRef.current) {
      flatListRef.current.scrollToEnd({ animated: false });
    }
  }, []);

  const renderItem = ({ item }) => {
    return (
      <View style={styles.messageContainer}>
        <Text style={styles.userName}>{item._id}</Text>
        <Text style={styles.userName}>{item.user.name}</Text>
        <Text style={styles.messageText}>{item.text}</Text>
      </View>
    );
  };

  return (
    <View style={styles.container}>
      <FlatList
        ref={flatListRef}
        data={messages}
        keyExtractor={(item) => item._id}
        renderItem={renderItem}
        onContentSizeChange={() => flatListRef.current.scrollToEnd()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor:  #f5f5f5 
  },
  messageContainer: {
    padding: 10,
    marginVertical: 5,
    marginHorizontal: 10,
    borderRadius: 8,
    backgroundColor:  #ffffff ,
  },
  userName: {
    fontWeight:  bold ,
    marginBottom: 5,
  },
  messageText: {
    fontSize: 16,
  },
});

export default MessageView;

友情链接