プログラミング ホーム

GiftedChatで配列を回してチャット履歴を作る

2018年12月7日

0
0

完全に覚書き。Reactも書いたことねえからセットステイト周りで積んでた。一ヶ月ぶりに再チャレンジでできるようになった。dbからチャットの履歴を取得した程で。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';

export default class App extends React.Component {


  state = {

        messages: 
         [
            {
              _id: 1,
              text: 'Hello developer',
              createdAt: new Date(),
              user: 
              {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
              },
            },
        ],
  }

  componentWillMount() {

    let texts = [
                  {
                    _id: 3,
                    text: 'Hello developer 3',
                    createdAt: new Date(),
                    user: {
                      _id: 1,
                      name: 'React Native',
                      avatar: 'https://placeimg.com/140/140/any',
                    },
                  },

                  {
                    _id: 4,
                    text: 'Hello developer 4',
                    createdAt: new Date(),
                    user: {
                      _id: 2,
                      name: 'React Native',
                      avatar: 'https://placeimg.com/140/140/any',
                    },
                  },
                ];

    let texts2 = [
                  {
                    _id: 6,
                    text: 'Hello developer 6',
                    createdAt: new Date(),
                    user: {
                      _id: 1,
                      name: 'React Native',
                      avatar: 'https://placeimg.com/140/140/any',
                    },
                  },
                ];

      texts = texts.concat(texts2);


      var i;
      var ii;
      for (i = 7; i < 23; i++) { 


          //奇数の場合
          if( ( i % 2 ) != 0 ) {

            ii = 1
          }

          //偶数の場合
          if( ( i % 2 ) == 0 ) {

            ii = 2

          }

          let texts3 = [
                        {
                          _id: i,
                          text: 'Hello developer 6',
                          createdAt: new Date(),
                          user: {
                            _id: ii,
                            name: 'React Native',
                            avatar: 'https://placeimg.com/140/140/any',
                          },
                        },
                      ];

            texts = texts.concat(texts3);

      }

       this.setState({ 

            messages: this.state.messages.concat(
              texts 
              )
            })
       }

  onSend(messages = []) {
    this.setState(previousState => ({
      messages: GiftedChat.append(previousState.messages, messages),
    }))
  }

  render() {
    return (
      <GiftedChat
        messages={this.state.messages}
        onSend={messages => this.onSend(messages)}
        user={{
          _id: 1,
        }}
      />
    )
  }
}

 

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-プログラミング, ホーム

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.