如何仅发送图像消息？（也没有发送文本）答案

【问题标题】：How to send an image message only ? (without sending a text as well)如何仅发送图像消息？（也没有发送文本）
【发布时间】：2019-08-22 14:38:10
【问题描述】：

我只是想发送一张图片而不输入任何文字？我正在使用 react-native-image-picker 并且我目前可以发送带有文本的图像，但是如果我只想发送图像怎么办？我尝试了 alwaysShowSend 并尝试发送，但除非文本字段不为空，否则什么也没有发生文档对此非常模糊......

      <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);
    }
  }

【问题讨论】：

标签： reactjs react-native react-native-image-picker react-native-gifted-chat

【解决方案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({});

【讨论】：

不，除非文本字段不为空，否则不会调用 onsend 函数本身
@AmrAboElenin 我已经修改了正确答案。你想试试吗？
感谢您的帮助，但问题在于如果文本字段不为空，则会调用 onSend 函数本身。
@AmrAboElenin 文本字段不为空但不为空时不能打电话吗？
@AmrAboElenin 你说你想发送没有文字的图像。但是你说你不能用文字翻页。当文本不为空时，表示有文本。

【解决方案2】：

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

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

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

【讨论】：

【解决方案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;
    }
  };

最后创建 customSend 按钮。 const customSend = ({onSend, text, sendButtonProps, ...sendProps}) => { 返回（ 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}
      />

这将允许您仅发送带有图片的消息（带标题或不带标题）。

【讨论】：

【解决方案4】：

我为此做了一些解决方法，选择图像并将文本为空时，我只是将文本设置为空白的空间，这使onsend函数有效而不需要将任何文本与图像发送！。

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

【讨论】：

【解决方案5】：

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

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

如果你愿意，你可以给空字符串。

【讨论】：