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

Question

我只是想发送图像而不输入任何文本？我正在使用 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);
    }
  }

Answer 1

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

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

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

Answer 2

你能试试这个吗？

 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 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}) => { return (<Send {...sendProps} textStyle={styles.sendButton} sendButtonProps={{ ...sendButtonProps, onPress: () => customSendPress(文本, 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

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

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

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

Answer 5

I did a little workaround for this, When the image is selected and the text is empty, i simply set the text to an empty space that way the onSend function works without needing to send any text with the image!.

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