如何仅发送图像消息?(也不发送文本)

Question

我只想在不输入任何文本的情况下发送图像？ 我正在使用反应原生图像选择器，我目前可以发送带有文本的图像，但是如果我只想发送图像怎么办？ 我总是尝试显示发送并尝试发送，但除非文本字段不为空，否则没有任何反应 文档对此非常模糊...

<GiftedChat
messages={friendMsgs}
onSend={messages => this.onSend(messages, this.state.image)}
user={{
_id: user && user.id,
name: user && user.firstName,
avatar: user && user.profilemage
}}
text={this.state.text}
alwaysShowSend={
this.state.text ? true : false || this.state.image ? true : false
}
onInputTextChanged={text => this.setState({ text })}
renderLoading={() => <Loading />}
onLoadEarlier={this.loadMessages.bind(this, userParams)}
isLoadingEarlier={loading}
isAnimated
renderAvatarOnTop
loadEarlier={friendMsgs.length >= 20}
scrollToBottom
scrollToBottomComponent={() => (
<Ionic name='ios-arrow-round-down' size={30} color='#000' />
)}
extraData={this.state}
renderBubble={props => {
const color = props.currentMessage.read ? '#0084ff' : '#389bff';
return (
<Bubble
{...props}
wrapperStyle={{ right: { backgroundColor: color } }}
/>
);
}}
renderActions={() => (
<Feather
style={styles.uploadImage}
onPress={this.uploadImage}
name='image'
size={30}
color='#000'
/>
)}
/>

onSend(messages = [], image) {
const { socket, user, navigation } = this.props;
const { friendMsgs } = this.props.history;
const receiver = navigation.getParam('user');
if (socket && socket.readyState === 1) {
const msg = {
...messages[0],
image
};
const sendMsg = GiftedChat.append(friendMsgs, msg);
const data = {
senderId: user && user.id,
receiverType: 'user',
messageType: 'text',
receiverId: receiver.id,
read: false,
content: messages[0].text
};
this.props.sendMsg(data, sendMsg);
}
}

Answer 1

你能试试这个吗？

const msg = {
createdAt: new Date(),
user: user && user.id,
image: image,
sent: true,
received: true,
}
...
const sendMsg = GiftedChat.append(friendMsgs, msg);
const data = {
senderId: user && user.id,
receiverType: 'user',
receiverId: receiver.id,
read: false,
};
this.props.sendMsg(data, sendMsg);
this.props.sendMsg({});

Answer 2

这最近出现在我的一个项目中。我创建了自己的Send组件，该组件最初是react-native-gifted-chat-send/lib/utils/Send的副本。

我修改了handleOnPress函数定义以检查是否已附加文件，并允许在文件存在或消息不为空时发送消息。

然后，此新的发送组件通过renderSend属性附加到GiftedChat。

Answer 3

您需要创建自定义发送按钮，以执行此操作：

import { GiftedChat, Send } from 'eact-native-gifted-chat';

然后在您的组件中制作此函数：

//Where onSend is the function use to onsend;
const customSendPress = (text, onSend) => {
if (image && !text && onSend) {
onSend({text: text.trim()}, true);
} else if (text && onSend) {
onSend({text: text.trim()}, true);
0;
} else {
return false;
}
};

最后创建自定义发送按钮。 const customSend = ({onSend， text， sendButtonProps， ...sendProps}( => { 返回 (<发送 textStyle="{styles.sendButton}" sendButtonProps="{{">customSendPress(text， onSend(， }}/> ); };

最后更新您的GiftedChat组件。

<GiftedChat
messages={messages}
onSend={(msg) => onSend(msg)}
user={{
_id: auth().currentUser.uid,
}}
renderSend={customSend}
alwaysShowSend
placeholder={image ? 'Add Caption' : 'Type your message'}
renderLoading={() => {
return <Loader />;
}}
renderTicks={customTicks}
/>

这将允许您仅发送带有图像的消息(带标题或不带标题(。

Answer 4

我为此做了一些解决方法， 当选择图像并且文本为空时，我只需将文本设置为空白区域，以便onSend函数工作，而无需随图像一起发送任何文本！

this.setState({ text: ' ' });

Answer 5

您可以使用此解决方法简单地绕过此问题

text={(this.state.recordingUri && "Audio") ||
(this.state.image && "Image")
}

如果需要，您可以给出空字符串。