如果messages对象为空，如何使用renderMessage，renderMessageImage函数以及如何不显示未找到消息

Question

我在应用程序中集成了react-native-gifted-chat。

我的天才聊天代码是

m!mode computer

在这里，我需要使用自定义图像渲染器。我知道我需要使用renderMessageImage，但是我找不到合适的例子来实现它。

     <GiftedChat
                composerHeight={COMPOSER_HEIGHT}
                minInputToolbarHeight={COMPOSER_HEIGHT}
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={{ _id: this.state.senderUserName }}
                loadEarlier={this.state.loadEarlier}
                isLoadingEarlier={this.state.isLoadingEarlier}
                onLoadEarlier={this.onLoadEarlier}
                placeholder="Type your message"
                renderSend={this.renderSend}
                alwaysShowSend={true}
                renderActions={this.imageSend.bind(this)}
                renderInputToolbar={this.renderInputToolbar}
                renderBubble={this.renderBubble.bind(this)}
                renderMessage={this.renderMessage.bind(this)}
                renderMessageImage={this.renderMessageImage}
                renderAvatar={null}
                inverted={true}
            /> 

，但是它不起作用。

我的另一个问题是，如果没有任何消息需要显示有天赋的聊天屏幕，因为找不到消息而不是白屏。我怎么能做到这两个。

我需要类似

的屏幕

Answer 1

您可以尝试从样式中删除flex:1，这可能是解决方案。

编辑

使用系统消息，如果有messages.length === 0，请将其包含在消息列表中。

编辑2

您必须创建一个叠加层，在这里查看我的示例：https://snack.expo.io/@xcarpentier/gifted-chat

render() {
    return (
      <>
      {this.state.messages.length === 0 && (
        <View style={[
          StyleSheet.absoluteFill,
          {
            backgroundColor: 'white',
            justifyContent: 'center',
            alignItems: 'center',
            bottom: 50
          }]}>
          <Image 
            source={{ uri: 'https://i.stack.imgur.com/qLdPt.png' }}
            style={{
              ...StyleSheet.absoluteFillObject,
              resizeMode: 'contain'
            }}
          />
      </View>
      )}
      <GiftedChat
       messages={this.state.messages}
       onSend={(messages) => this.onSend(messages)}
       renderCustomView={this.renderCustomView}
       user={{
         _id: 1,
       }}
       parsePatterns={linkStyle => [
          {
            pattern: /#(\w+)/,
            style: { ...linkStyle, color: 'lightgreen' },
            onPress: props => alert(`press on ${props}`),
          },
        ]}
     />
     </>
    );
  }