如何使用 renderMessage、renderMessageImage 函数以及消息对象为空时如何显示未找到消息

Question

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

我的天才聊天代码是

     <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}
            /> 

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

My RenderMessageImage is 

        renderMessage(props) {
           if(this.state.messages.length !==0){
             return <Message {...props} 
             />;
             }else{
               return <View style={{flex:1, backgroundColor:'red'}}>
                 <Text>Hello no data found</Text>
               </View>
                  }
                return null
                    }

但它不起作用。

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

我需要类似的屏幕

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}`),
          },
        ]}
     />
     </>
    );
  }