@smart-link/rn-im 1.0.24 → 1.1.1

package/dist/pages/message/FileSelector.js

@@ -0,0 +1,272 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// @flow
+import * as React from 'react';
+import { dp, NavigationPage, SearchInput, Toast } from "@smart-link/rn-ui";
+import * as DocumentPicker from '@react-native-documents/picker';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text, FlatList } from "react-native";
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { copyFile, getExtensionFromMime, getFileRootItem, getFileType, isImage, numberToFileSize, readFileDir, selectFile } from "../../utils/file";
+import { getImManager } from "../../init";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import useTranslation from "../../hooks/useTranslation";
+import { findSvgIcon } from "../../utils/file-icon";
+import FastImage from "react-native-fast-image";
+import { dirImg } from "../../default-assets";
+import { formatTime } from "../../hooks/useFormatMsgTime";
+import { useConversation } from "../../hooks/useImSelector";
+const getIcon = (item) => {
+    if (item.isDir) {
+        return <FastImage style={styles.fileImage} source={dirImg}/>;
+    }
+    if (isImage(item.path)) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.path }}/>;
+    }
+    if (item.thumbPath) {
+        return <FastImage style={styles.fileImage} source={{ uri: 'file://' + item.thumbPath }}/>;
+    }
+    const Icon = findSvgIcon(getFileType(item.path));
+    return <Icon style={styles.fileImage}/>;
+};
+const FileSelector = ({ navigation }) => {
+    const scrollHolder = {};
+    const [data, setData] = useState([]);
+    const [keyword, setKeyword] = useState('');
+    const [pathItems, setPathItems] = useState([]);
+    const imManager = getImManager();
+    const { t, i18n } = useTranslation();
+    const { currentConversation } = useConversation();
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft({ tintColor }) {
+                return (<TouchableOpacity activeOpacity={0.5} style={{ padding: dp(10) }} onPress={() => {
+                        navigation.goBack();
+                    }}>
+                        <Text style={{ color: tintColor }}>{t('cancel')}</Text>
+                    </TouchableOpacity>);
+            },
+            title: t('file')
+        });
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, [navigation, t]);
+    const onPressItem = (item) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!item.isDir) {
+            const localPath = yield selectFile(imManager, item.path, item.name);
+            const file = {
+                filename: item.name,
+                localPath: localPath,
+                size: item.size,
+                type: getFileType(item.path),
+                lastModified: item.time,
+            };
+            navigation.goBack();
+            if (isImage(file.localPath)) {
+                imManager.sendPictureMessage(currentConversation, file);
+            }
+            else {
+                imManager.sendFileMessage(currentConversation, file);
+            }
+            return;
+        }
+        if (item.path === 'outside') {
+            try {
+                const files = yield DocumentPicker.pick({
+                    type: [DocumentPicker.types.allFiles],
+                });
+                const fileInfo = files[0];
+                console.log('chooseFile: ', fileInfo);
+                if (!fileInfo.uri) {
+                    Toast.error(t("failedToObtainFilePath"));
+                    return;
+                }
+                const ext = getExtensionFromMime(fileInfo.type);
+                if (!ext) {
+                    Toast.error(t("unsupportedFileTypes"));
+                    return;
+                }
+                if (!fileInfo.name.endsWith(ext)) {
+                    fileInfo.name = fileInfo.name + ext;
+                }
+                // ios 中文名称编码了，需要解码
+                fileInfo.uri = decodeURI(fileInfo.uri);
+                const localPath = yield copyFile(fileInfo.uri, fileInfo.name, 'file');
+                imManager.sendFileMessage(currentConversation, {
+                    localPath: localPath,
+                    filename: fileInfo.name,
+                    size: fileInfo.size,
+                    type: fileInfo.type,
+                    lastModified: Date.now(),
+                });
+                navigation.goBack();
+            }
+            catch (e) {
+                console.log('pick file: ', e);
+            }
+            return;
+        }
+        setPathItems([...pathItems.filter(pathItem => pathItem.path !== item.path), item]);
+        scrollHolder.scroll.scrollToEnd();
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    });
+    const onChangeText = useCallback((keyword) => {
+        setKeyword(keyword);
+        if (pathItems.length === 0) {
+            return;
+        }
+        readFileDir(imManager, pathItems[pathItems.length - 1].path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems]);
+    const onPressPathRoot = useCallback(() => {
+        setPathItems([]);
+        getFileRootItem(imManager).then(items => {
+            setData(items);
+        });
+    }, []);
+    const onPressPathItem = useCallback((item) => {
+        setPathItems([
+            ...pathItems.filter(source => source.path.indexOf(item.path) === -1),
+            item
+        ]);
+        readFileDir(imManager, item.path, keyword).then(items => {
+            setData(items);
+        });
+    }, [pathItems, keyword]);
+    const listHeaderComponent = data.length === 0 ? null : <View style={styles.listHeaderLine}/>;
+    const listFooterComponent = data.length === 0 ? null : <View style={styles.listFooterLine}/>;
+    const itemSeparatorComponent = () => <View style={styles.separator}/>;
+    const keyExtractor = (item) => item.name + '_' + item.size;
+    const renderItem = ({ item }) => {
+        const icon = getIcon(item);
+        const extText = item.isDir ? (item.childrenCount + t('items')) : numberToFileSize(item.size);
+        return (<TouchableOpacity style={styles.item} onPress={() => {
+                onPressItem && onPressItem(item);
+            }}>
+
+                {icon}
+                <View style={styles.width15}/>
+                <View style={styles.left}>
+                    <Text style={styles.name} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {item.name}
+                    </Text>
+                    <Text style={styles.time} numberOfLines={1} ellipsizeMode={'middle'}>
+                        {(item.time ? (formatTime(item.time, t, i18n) + ' - ') : '') + extText}
+                    </Text>
+                </View>
+                {item.isDir &&
+                <AntDesign name='right' size={dp(14)} color={'#666'} style={styles.accessory}/>}
+
+            </TouchableOpacity>);
+    };
+    return (<NavigationPage noPadding>
+            <View style={styles.selector}>
+                <View style={styles.search}>
+                    <SearchInput style={{
+            height: dp(32),
+            backgroundColor: '#ececec',
+        }} value={keyword} onChange={onChangeText} onSubmitEditing={() => { }} placeholder={t('search')}/>
+                </View>
+                <View style={styles.scroll}>
+                    <TouchableOpacity onPress={onPressPathRoot} style={styles.scrollVertical}>
+                        <Text style={styles.pathText}>{t('position')}</Text>
+                    </TouchableOpacity>
+                    <AntDesign name='right' size={dp(16)} color={'#333'} style={styles.scrollVertical}/>
+                    <ScrollView style={styles.scrollVertical} horizontal={true} ref={v => scrollHolder.scroll = v}>
+
+                        {pathItems.map((pathItem, index) => {
+            const disabled = index === pathItems.length - 1;
+            return (<Fragment key={index}>
+                                        <TouchableOpacity disabled={disabled} onPress={() => {
+                    onPressPathItem && onPressPathItem(pathItem);
+                }}>
+                                            <Text style={styles.pathText}>{pathItem.name}</Text>
+                                        </TouchableOpacity>
+                                        <AntDesign name='right' size={dp(16)} color={'#333'}/>
+                                    </Fragment>);
+        })}
+                    </ScrollView>
+                </View>
+                <FlatList contentContainerStyle={styles.list} ItemSeparatorComponent={itemSeparatorComponent} ListHeaderComponent={listHeaderComponent} ListFooterComponent={listFooterComponent} initialNumToRender={20} numColumns={1} data={data} keyboardShouldPersistTaps={'handled'} keyExtractor={keyExtractor} renderItem={renderItem}/>
+            </View>
+        </NavigationPage>);
+};
+const styles = StyleSheet.create({
+    selector: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    scroll: {
+        flexDirection: 'row',
+        paddingHorizontal: dp(8),
+    },
+    scrollVertical: {
+        paddingBottom: dp(10),
+    },
+    pathText: {
+        paddingHorizontal: dp(5),
+        fontSize: dp(14),
+        lineHeight: dp(16),
+        color: '#666',
+    },
+    search: {
+        backgroundColor: '#fff',
+        padding: dp(10),
+    },
+    list: {
+        paddingHorizontal: dp(15),
+    },
+    listFooterLine: {},
+    listHeaderLine: {},
+    separator: {
+        marginLeft: dp(65),
+        marginVertical: dp(10),
+        height: dp(1),
+        backgroundColor: '#ececec'
+    },
+    width15: {
+        width: dp(15),
+    },
+    width10: {
+        width: dp(10),
+    },
+    item: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    fileImage: {
+        borderRadius: dp(5),
+        width: dp(49),
+        height: dp(49)
+    },
+    left: {
+        justifyContent: 'space-around'
+    },
+    name: {
+        color: '#333',
+        fontSize: dp(15),
+        lineHeight: dp(20),
+        width: dp(260),
+    },
+    time: {
+        color: '#666',
+        fontSize: dp(12),
+        lineHeight: dp(18),
+    },
+    accessory: {
+        alignSelf: 'center',
+        position: 'absolute',
+        right: dp(15),
+    }
+});
+export default FileSelector;

package/dist/pages/message/MessageList.js

@@ -20,19 +20,22 @@ import { noMessageImg } from "../../default-assets";
 const MessageList = ({ navigation }) => {
     const { t } = useTranslation();
     const messageListRef = useRef(null);
-    const { currentConversation } = useConversation();
-    const { messages, rangeList, quote, tips, isMultiple, multipleSelect, isSearch } = useMessage();
+    const { currentConversation, onlineClients } = useConversation();
+    const { messages, focusMessageIndex, quote, tips, isMultiple, multipleSelect } = useMessage();
     const { user } = useAuth();
     const bar = useRef(null);
     const [showAlbum, setShowAlbum] = useState(false);
     const [targetMessageSeq, setTargetMessageSeq] = useState('');
     const [selectMessage, setSelectMessage] = useState();
-    const [nativeEvent, setNativeEvent] = useState();
     const [loading, setLoading] = useState(false);
-    const itemLayout = useRef({});
+    const [touchPoint, setTouchPoint] = useState();
+    const [targetLayout, setTargetLayout] = useState();
+    const itemLayout = useRef({}).current;
+    const listHeight = useRef(0);
+    const init = useRef(true);
     const isB2C = (currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.B2C;
     useEffect(() => {
-        console.log('[进入会话]: ', currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.name);
+        // console.log('[进入会话]: ', currentConversation?.name);
         if (currentConversation) {
             navigation.setOptions({
                 headerLeft: isMultiple
@@ -43,7 +46,16 @@ const MessageList = ({ navigation }) => {
                         </TouchableOpacity>)
                     : HeaderBackButton,
                 headerTitle: ({ tintColor }) => (<View style={{ width: dp(220) }}>
-                    <Text numberOfLines={1} style={{ color: tintColor, fontSize: dp(18), textAlign: 'center' }}>{currentConversation.name}</Text>
+                    <Text numberOfLines={1} style={{
+                        color: tintColor,
+                        fontSize: dp(18),
+                        textAlign: 'center'
+                    }}>{currentConversation.name}</Text>
+                    {onlineClients.length > 0 && <Text style={{
+                            color: tintColor,
+                            fontSize: dp(12),
+                            textAlign: 'center'
+                        }}>({onlineClients.join(',')})</Text>}
                 </View>),
                 headerRight: ({ tintColor }) => (<TouchableOpacity onPress={() => {
                         navigation.navigate('ConversationSetting');
@@ -62,36 +74,36 @@ const MessageList = ({ navigation }) => {
                 InteractionManager.runAfterInteractions(() => {
                     imManager.store.dispatch(MessagePanelActions.saveDraftText(imManager));
                     imManager.leaveConversation();
-                    imManager.store.dispatch(MessageActions.resetState());
+                    imManager.store.dispatch(MessageActions.resetState({}));
                 });
             }
         });
         return () => {
             remover();
         };
-    }, [isMultiple, navigation, currentConversation]);
+    }, [isMultiple, navigation, currentConversation, onlineClients]);
     useEffect(() => {
         getImManager().setFlatListRef(messageListRef);
         getImManager().setInputRef(bar);
     }, []);
-    useEffect(() => {
-        var _a;
-        if (isSearch) {
-            (_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
-            getImManager().store.dispatch(MessageActions.setIsSearch(false));
+    const onPressPopover = useCallback((message, nativeEvent) => {
+        if (message.payloadType === PayloadType.PICTURE) {
+            setShowAlbum(true);
+            setSelectMessage(undefined);
+            setTargetMessageSeq(message.messageSeq);
         }
-    }, [isSearch]);
-    const onLongPressPopover = useCallback((message, nativeEvent) => {
-        setNativeEvent(nativeEvent);
+    }, []);
+    const onLongPressPopover = useCallback((message, nativeEvent, layout) => {
         setSelectMessage(message);
+        setTouchPoint({
+            x: nativeEvent.pageX - nativeEvent.locationX,
+            y: nativeEvent.pageY - nativeEvent.locationY
+        });
+        setTargetLayout(layout);
+    }, []);
+    const onLayoutItem = useCallback((message, index, e) => {
+        itemLayout[index] = e.nativeEvent.layout.height;
     }, []);
-    const onLayoutItem = useMemoizedFn((message, e) => {
-        itemLayout.current[message.messageSeq] = e.nativeEvent.layout.height;
-        if (rangeList.length > 0 && message.messageSeq === (tips === null || tips === void 0 ? void 0 : tips.messageSeq)) {
-            const imManager = getImManager();
-            imManager.store.dispatch(MessagePanelActions.onRangeLayout(imManager));
-        }
-    });
     const onLoadBefore = useMemoizedFn(() => {
         getImManager()
             .loadBeforeMessages(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.id, { limit: 15 })
@@ -107,25 +119,41 @@ const MessageList = ({ navigation }) => {
         });
     });
     const renderItem = useMemoizedFn(({ item, index }) => {
-        return (<MessageItem message={item} conversation={currentConversation} mine={item.messageFrom === user.userId} showTimeLine={showTimeLine(item, index, messages)} isMultiple={isMultiple} multipleSelect={multipleSelect} onLongPressPopover={onLongPressPopover} onPressPopover={onPressPopover} onLayoutItem={onLayoutItem}/>);
+        return (<MessageItem {...item} key={item.messageSeq} mine={item.messageFrom === user.userId} showTimeLine={showTimeLine(item, index, messages)} isMultiple={isMultiple} multipleSelect={multipleSelect} onLongPressPopover={onLongPressPopover} onPressPopover={onPressPopover} onLayoutItem={onLayoutItem} index={index}/>);
     });
     const onTouchStart = useCallback(() => {
         var _a;
         (_a = bar.current) === null || _a === void 0 ? void 0 : _a.reset();
     }, []);
-    const onPressPopover = useCallback((message, nativeEvent) => {
-        if (message.payloadType === PayloadType.PICTURE) {
-            setNativeEvent(nativeEvent);
-            setShowAlbum(true);
-            setTargetMessageSeq(message.messageSeq);
-        }
-    }, []);
     const onKeyboardAt = () => {
         if ((currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.C2G) {
             Keyboard.dismiss();
             navigation.navigate('ChooseMember', { atOther: true });
         }
     };
+    useEffect(() => {
+        if (focusMessageIndex != null) {
+            const jump = () => {
+                var _a;
+                let offset = 0;
+                for (let i = 0; i <= focusMessageIndex; i++) {
+                    if (!itemLayout[i]) {
+                        setTimeout(jump, 16);
+                        return;
+                    }
+                    offset += itemLayout[i];
+                }
+                console.log('listHeight: ', listHeight);
+                (_a = messageListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({
+                    offset: offset - listHeight.current / 2,
+                    animated: true,
+                });
+                const imManager = getImManager();
+                imManager.store.dispatch(MessageActions.setFocusMessageIndex(null));
+            };
+            jump();
+        }
+    }, [focusMessageIndex]);
     return (<NavigationPage noPadding>
             {(currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.type) === ConversationType.B2C && (<View style={{ padding: dp(8), backgroundColor: '#f5f5f5', elevation: 1 }}>
                     <Input shape="normal" placeholder={t('search')} wrapStyle={{ height: dp(40) }}/>
@@ -141,31 +169,33 @@ const MessageList = ({ navigation }) => {
             </TouchableWithoutFeedback>)}
 
             {messages.length > 0 && (<ChatBg fileId={currentConversation === null || currentConversation === void 0 ? void 0 : currentConversation.imageBackground}>
-                <>
-                    <FlatList ref={messageListRef} inverted contentContainerStyle={{
-                paddingVertical: dp(20),
-                justifyContent: 'flex-end',
-                flexGrow: 1,
-                overflow: 'scroll',
-            }} numColumns={1} onEndReachedThreshold={0.1} keyboardShouldPersistTaps={'handled'} keyExtractor={item => item.messageSeq} renderItem={renderItem} data={messages} onEndReached={onLoadBefore} refreshing={false} 
+                <View style={styles.container}>
+                    <FlatList ref={messageListRef} inverted contentContainerStyle={styles.list} numColumns={1} onEndReachedThreshold={0.1} keyboardShouldPersistTaps={'handled'} keyExtractor={item => item.messageSeq} renderItem={renderItem} initialNumToRender={messages.length} data={messages} onEndReached={onLoadBefore} refreshing={false} 
         // 在头部增加数据时，保持滚动位置，0.72 以上可以使用
-        maintainVisibleContentPosition={{
+        maintainVisibleContentPosition={messages.length > 10 ? {
                 minIndexForVisible: 0,
-            }} onRefresh={onLoadAfter} onTouchStart={onTouchStart}/>
+            } : undefined} onRefresh={onLoadAfter} onTouchStart={onTouchStart} onLayout={(e) => {
+                listHeight.current = e.nativeEvent.layout.height;
+                if (init.current) {
+                    init.current = false;
+                    messageListRef.current.scrollToOffset({ animated: false, offset: 0 });
+                }
+            }}/>
                     {quote && (<MessageItemQuote {...quote} onDeleteQuote={() => {
                     getImManager().store.dispatch(MessageActions.setQuote(null));
                 }}/>)}
-                </>
+                </View>
             </ChatBg>)}
 
             {!isB2C && (isMultiple ? <MultipleBar /> : <MessageBar ref={bar} onKeyboardAt={onKeyboardAt}/>)}
 
             {tips && tips.type !== TipsType.NONE && (<MessageItemTips {...tips}/>)}
-            <MessageOption visible={Boolean(selectMessage)} nativeEvent={nativeEvent} message={selectMessage} setLoading={(value) => {
+            <MessageOption visible={Boolean(selectMessage)} touchPoint={touchPoint} nativeEventLayout={targetLayout} message={selectMessage} setLoading={(value) => {
             setLoading(value);
         }} onClose={() => {
-            setNativeEvent(undefined);
             setSelectMessage(undefined);
+            setTargetLayout(undefined);
+            setTouchPoint(undefined);
         }}/>
 
             <MessagePictureAlbum visible={showAlbum} messages={messages} messageSeq={targetMessageSeq} onClose={() => {
@@ -195,5 +225,13 @@ const styles = StyleSheet.create({
         lineHeight: dp(16),
         color: "#999999"
     },
+    container: {
+        flex: 1,
+    },
+    list: {
+        paddingVertical: dp(20),
+        justifyContent: 'flex-end',
+        flexGrow: 1
+    }
 });
 export default MessageList;

package/dist/pages/message/MessageRecord.js

@@ -1,50 +1,66 @@
 import ChatAvatar from '../../components/ChatAvatar/ChatAvatar';
 import FormatTimeText from '../../components/FormatTimeText';
 import { dp, NavigationPage } from '@smart-link/rn-ui';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { View, StyleSheet, FlatList, Text } from 'react-native';
 import MessagePayload from './components/MessagePayload';
+import { MessageListActions } from '@smart-link/im-base';
 import MessagePictureAlbum from "./components/MessagePictureAlbum";
-import { cloneDeep } from "lodash-es";
+import { useMessage } from "../../hooks/useImSelector";
+import { getImManager } from "../../init";
+import { loadVideoPlayer } from "../../slice/video/video.action";
 const MessageRecord = ({ navigation, route: { params } }) => {
-    const { messages, title } = params;
+    const { messageSeq, title } = params;
+    const { messageListData } = useMessage();
     useEffect(() => {
         navigation.setOptions({
             title,
         });
+        return () => {
+            console.log('back');
+            getImManager().store.dispatch(MessageListActions.removeMessageListData());
+        };
     }, [navigation, title]);
     const listRef = React.useRef(null);
-    const [updateMessages, setUpdateMessages] = React.useState([]);
     const [previewMessages, setPreviewMessages] = React.useState([]);
     const [showAlbum, setShowAlbum] = React.useState(false);
     const [targetMessageSeq, setTargetMessageSeq] = React.useState('');
+    const data = useMemo(() => {
+        var _a;
+        return ((_a = messageListData.find(item => item.messageSeq === messageSeq)) === null || _a === void 0 ? void 0 : _a.childMessages) || [];
+    }, [messageSeq, messageListData]);
     useEffect(() => {
         var _a;
-        setUpdateMessages(cloneDeep(messages));
         (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToOffset({ animated: false, offset: 0 });
-    }, [messages]);
+    }, [messageSeq]);
     const onPress = (item) => {
-        var _a;
-        // console.log('MessageRecord: ', item);
-        if (((_a = item.payload.quote) === null || _a === void 0 ? void 0 : _a.quoteMessage.payloadType) === 'picture') {
-            setShowAlbum(true);
-            setTargetMessageSeq(item.payload.quote.quoteMessage.messageSeq);
-            setPreviewMessages([item.payload.quote.quoteMessage]);
-            return;
+        if (item.payload.quote) {
+            if (item.payload.quote.quoteMessage.payloadType === 'picture') {
+                setShowAlbum(true);
+                setTargetMessageSeq(item.payload.quote.quoteMessage.messageSeq);
+                setPreviewMessages([item.payload.quote.quoteMessage]);
+                return;
+            }
+            if (item.payload.quote.quoteMessage.payloadType === 'video') {
+                getImManager().store.dispatch(loadVideoPlayer({
+                    messageSeq: item.payload.quote.quoteMessage.messageSeq,
+                    payload: item.payload.quote.quoteMessage.payload,
+                    isRecord: true
+                }));
+            }
         }
         if (item.payloadType === 'picture') {
             setShowAlbum(true);
             setTargetMessageSeq(item.messageSeq);
-            setPreviewMessages(updateMessages);
+            setPreviewMessages(data);
         }
     };
     return (<NavigationPage noPadding>
-            <FlatList ref={listRef} contentContainerStyle={styles.list} data={updateMessages} renderItem={({ item, index }) => {
-            console.log('index: ', index);
-            const isSamePerson = index > 0 && updateMessages.length > 1 && updateMessages[index - 1].messageFrom === item.messageFrom;
+            <FlatList ref={listRef} contentContainerStyle={styles.list} data={data} renderItem={({ item, index }) => {
+            const isSamePerson = index > 0 && data.length > 1 && data[index - 1].messageFrom === item.messageFrom;
             return (<View style={styles.messageItem}>
                             <View style={styles.avatar}>
-                                {!isSamePerson && (<ChatAvatar id={item.messageFrom} url={item.payload.avatars} size={dp(40)} name={item.messageFromName}/>)}
+                                {!isSamePerson && (<ChatAvatar id={item.messageFrom} size={dp(40)} name={item.messageFromName}/>)}
                             </View>
                             <View style={styles.content}>
                                 <View style={styles.info}>
@@ -53,11 +69,6 @@ const MessageRecord = ({ navigation, route: { params } }) => {
                                 </View>
                                 <MessagePayload {...item} isRecord direction="left" showArrow={false} onPress={() => {
                     onPress(item);
-                }} onLoad={(localPath) => {
-                    console.log('localPath: ', localPath);
-                    if (!item.payload.localPath) {
-                        item.payload.localPath = localPath;
-                    }
                 }}/>
                             </View>
                         </View>);

package/dist/pages/message/components/MessageItem.d.ts

@@ -1,16 +1,16 @@
-import { IConversation, IMessage } from '@smart-link/im-base';
+import { IMessage } from '@smart-link/im-base';
 import React from 'react';
 import { NativeTouchEvent, LayoutChangeEvent } from 'react-native';
+import { NativeEventLayout } from "../../types";
 type MessageItemProps = {
     isMultiple?: boolean;
     multipleSelect?: Record<string, IMessage>;
-    conversation: IConversation;
-    message: IMessage;
     mine: boolean;
     showTimeLine: boolean;
-    onLongPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
+    index: number;
+    onLongPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent, layout: NativeEventLayout) => void;
     onPressPopover: (message: IMessage, nativeEvent: NativeTouchEvent) => void;
-    onLayoutItem: (item: IMessage, e: LayoutChangeEvent) => void;
-};
-declare const _default: React.MemoExoticComponent<({ isMultiple, multipleSelect, conversation, message, mine, showTimeLine, onPressPopover, onLongPressPopover, onLayoutItem, }: MessageItemProps) => React.JSX.Element>;
+    onLayoutItem: (item: IMessage, index: number, e: LayoutChangeEvent) => void;
+} & IMessage;
+declare const _default: React.MemoExoticComponent<({ isMultiple, multipleSelect, mine, index, showTimeLine, onPressPopover, onLongPressPopover, onLayoutItem, ...message }: MessageItemProps) => React.JSX.Element>;
 export default _default;