Works by

プログラミング等IT技術関連でメモする

【React Native】Expo + react-native-gifted-chat でチャットアプリを作る

最近React Nativeの開発を始めたのですが、いろいろなReact NativeのUIコンポーネントが配布されているようなので 適当にいじって遊んでみることにしました。

今回は、チャットUIとして提供されているreact-native-gifted-chatを試してみました。

react-native-gifted-chat

github.com

React NativeのUIコンポーネントです。
簡単にMessengerライクなチャット画面を作成することができます。
商用でも全然いけそうな見た目してます。

f:id:rennnosukesann:20180527153735p:plain

Expo

今回は実機(iOS)で開発するため、実機開発用のデプロイツールも使いました。

expo.io

ExpoオープンソースのReact Nativeビルドツールチェーンです。
Expoを使うことで、iOS/Android端末上へのアプリのビルド/デプロイが簡単に行なえます。
またソースコードの変更を即座に端末内のアプリに反映することができます。

Usage

早速作っていきます!

  1. モバイル端末にExpo Clientをインストールします。

f:id:rennnosukesann:20180527150455j:plain:w300

  1. モバイル端末とお使いのPCを同一のWi-fiに接続します(テザリングでも構いません)。

  2. セットアップ(テザリングしている人は先にnpm installをWi-fiでやったほうが通信量的にいいです)

$ npm install -g react-native create-react-native-app
$ create-react-native-app my-app
$ cd my-app
$ npm start

出現したQRコードをモバイル端末で読み取ります。
するとExpoアプリを起動できる通知が来るので、通知をタップ。

アプリが起動したらOKです!

src

公式のリポジトリを参考に、App.jsを下記のように書き換えてみました。

import React from 'react';
import { GiftedChat } from 'react-native-gifted-chat';

export default class App extends React.Component {

    componentWillMount() {
        this.setState({messages : []});
    }

    reply(){
        return {
            _id: 1,
            text: 'Hello!',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            }
        };
    }


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

    render() {
        return (
                <GiftedChat
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={{
                    _id: 1,
                    name: 'you',
                    avater: 'https://placeimg.com/140/140/any'
                }}
                />
        );
    }
}

GiftedChatが今回利用するチャットのUIコンポーネントになります。 messagesにはメッセージの履歴が渡され、 onSendにはSendボタンタップ時の挙動が渡されます。 userには操作する人のユーザ情報(名前やサムネイルなど)が渡されます。

Stateの持つmessagesにメッセージオブジェクトを追加していくことでどんどん履歴を追加できます。
メッセージオブジェクトのフォーマットは公式Githubreply()メソッドが返すオブジェクトを参照してください。

Demo

f:id:rennnosukesann:20180527154732j:plain:w300

うまくできました! GiftedChatをそのままつかうだけでも結構リッチなChatUIを使うことができました。

参考

github.com

github.com

expo.io