110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
import { View, Text } from "react-native";
|
|
import React, { useState, useCallback, useEffect } from "react";
|
|
import { Bubble } from "react-native-gifted-chat";
|
|
import { useTailwind } from "tailwind-rn";
|
|
import "dayjs/locale/zh-cn";
|
|
import {
|
|
GestureHandlerRootView,
|
|
TouchableOpacity,
|
|
} from "react-native-gesture-handler";
|
|
import AutoAnswerBtn from "../AutoAnswerBtn";
|
|
export default function OwnBubble({
|
|
navigation,
|
|
route,
|
|
onSend,
|
|
currentMessage,
|
|
...props
|
|
}) {
|
|
const tailwind = useTailwind();
|
|
const [currentHeight, setCurrentHeight] = useState(null);
|
|
return (
|
|
<Bubble
|
|
{...props}
|
|
height={currentHeight}
|
|
wrapperStyle={{
|
|
left: {
|
|
...tailwind("bg-white p-1"),
|
|
minHeight: currentHeight,
|
|
// width: 100,
|
|
flexShrink: 1,
|
|
flexGrow: 0,
|
|
// position: "relative", // 避免 absolute
|
|
overflow: "hidden", // 允许内容溢出
|
|
// justifyContent: "center",
|
|
// height: "auto",
|
|
},
|
|
right: {
|
|
...tailwind("p-1"),
|
|
// minHeight: currentHeight,
|
|
},
|
|
}}
|
|
currentMessage={{
|
|
...currentMessage,
|
|
text:
|
|
currentMessage.mType === 1 ? (
|
|
<View
|
|
style={{ flexShrink: 1 }} // 防止内容被挤压
|
|
onLayout={(event) => {
|
|
const { height } = event.nativeEvent.layout;
|
|
// 如果内容高度超过最小高度，动态更新气泡高度（可选）
|
|
// console.log("气泡高度:", height, currentMessage._id);
|
|
// 设置气泡的高度
|
|
// props.onLayout({ height });
|
|
setCurrentHeight((prev) => height);
|
|
// currentOwnHeight = height;
|
|
// 动态设置气泡的高度
|
|
}}
|
|
>
|
|
{/* <Text>{currentMessage.text}</Text> */}
|
|
<AutoMessage
|
|
{...props}
|
|
message={currentMessage.text}
|
|
messageData={currentMessage}
|
|
mType={currentMessage.mType}
|
|
height={currentHeight}
|
|
onSend={onSend}
|
|
/>
|
|
</View>
|
|
) : (
|
|
currentMessage.text
|
|
),
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
const AutoMessage = ({
|
|
message = "",
|
|
mType,
|
|
height,
|
|
currentMessage,
|
|
|
|
...props
|
|
}) => {
|
|
// console.log("data", height);
|
|
const tailwind = useTailwind();
|
|
const test = message.split("|");
|
|
const btns = test[1].split(",");
|
|
return (
|
|
<View
|
|
{...props}
|
|
style={{ marginTop: height, paddingVertical: 10, width: 200 }}
|
|
>
|
|
<View style={{ marginTop: 10 }}>
|
|
<Text style={{ fontSize: 16 }}>{test[0]}</Text>
|
|
</View>
|
|
<View
|
|
style={{
|
|
...tailwind("flex-row flex-wrap mt-2"),
|
|
gap: 8,
|
|
}}
|
|
>
|
|
{btns.map((item, index) => {
|
|
return <AutoAnswerBtn key={index} text={item} {...props} />;
|
|
})}
|
|
</View>
|
|
</View>
|
|
);
|
|
|
|
// data.m_type===1?it?.text.split("|")it?.text
|
|
};
|