Как использовать функции renderMessage, renderMessageImage, а также как отображать сообщения не найдены, если объект messages пуст - PullRequest
Новая
       2

Как использовать функции renderMessage, renderMessageImage, а также как отображать сообщения не найдены, если объект messages пуст

0 голосов
/ 05 февраля 2019

Я интегрирую реагирующий на родство чат в моем приложении.

Мой код для одаренного чата: 

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

но это не работает.

и еще одна моя проблема - если нет сообщений, мне нужно показать одаренный экран чата, так как сообщения не найдены вместо белого экрана.Как я могу добиться этого два.

мне нужен экран что-то вроде

enter image description here

1 Ответ

0 голосов
/ 06 февраля 2019

Вы можете попытаться удалить 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}`),
          },
        ]}
     />
     </>
    );
  }
...