React Native Gifted Chat: сообщения отображаются слишком низко, а затем отображаются правильно - PullRequest
Новая
       7

React Native Gifted Chat: сообщения отображаются слишком низко, а затем отображаются правильно

0 голосов
/ 09 марта 2020

Видео прогона: https://imgur.com/a/fLZSsA6

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

// ... imports

class Chat extends React.Component {

   get user(){
        const { user } = this.props
        return {
            name: user.name,
            avatar: user.avatar,
            _id: user.uid
        };
    }

    goBack = () => {
        this.props.navigation.goBack()
    }

    render() {
      return (
        <>
            {this.props.chat && this.props.chat.messages ? 
            <><BackHeader title={this.props.chat.courseTitle} leftAction={this.goBack} titleSize={12} />
            <GiftedChat
                alwaysShowSend={true}
                renderUsernameOnMessage={true}
                isTyping={true}
                messages={this.props.chat.messages}
                onSend={message => this.props.addMessage(message[0], this.props.chat.id)}
                maxInputLength={500}
                user={this.user}
                renderLoading={() => 
                  <View style={[styles.container]}>
                    <ActivityIndicator size="large" color="gray" />
                  </View>} 
            />
            </>
            : null}
        </>
      );
    }
  }

  const mapDispatchToProps = (dispatch) => {
    return {
      addMessage: (message, chatId) => dispatch(addMessage(message, chatId)),
    }
  }

  const mapStateToProps = (state, ownProps) => {     
    let singleChat = state.firestore.data.chats[ownProps.navigation.state.params.id]
    if(singleChat && singleChat.messages){
      let temp = {...singleChat, 
        messages: singleChat.messages.map((m) => {
          let message = state.firestore.data.allMessages[m]
          return {
            ...message,
            createdAt: message.timestamp.toDate()
          }
        }).reverse()
      }
      return {
        user: state.firestore.data.user,
        chat: temp,
      }
    }else{
      return {
        user: state.firestore.data.user,
        chat: { messages: null },
      }
    }
}

  export default compose(
    firestoreConnect((props) => {
      return [ { collection: 'chats' }, { collection: 'messages' },
                { collection: 'users' } ] 
    }),
    connect(mapStateToProps, mapDispatchToProps),
  )(Chat)


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
  })
...