目次
- 環境構築
- コマンドインストール
- ライブラリインストール
- App.jsを書き換え
- 動作確認
誤字脱字あると思いますが、温かい目で見てください！🙇♂️💦
誤りなどありましたら、ご指摘頂けると幸いです💦
環境構築
コマンドインストール
詳しくは 公式 [ React Native CLI Quickstart ] を参照
( ※Expoは利用していません。Expoにするとスタンドアローンでは無くなる為)
macbookで、Androidアプリ起動を対象とします。
また、Android StudioとXcodeがmacbookにインストールされているという前提で行います。
すでに自分が作成したシェルスクリプトが存在するので、こちらをGithubからクローンして利用してください。以下の手順で実行します。
# Githubからダウンロード
$ git clone https://github.com/susu-to-susu/ChatApp.git
# ディレクトリ移動
$ cd ChatApp
# 環境構築用シェルスクリプトを実行
$ sh settingEnvironment.sh
# もし自分用にカスタマイズしたいアプリを作成したい場合
# 雛形作成
$ create-react-native-app ../myApp
ライブラリインストール(アップデート)
チャットアプリのライブラリをインストール(アップデート)します。
自分が作成した時とみなさんが動かそうとする時で、バージョンが違う可能性があるため
# 未インストール
$ npm install react-native-gifted-chat --save
# アップデート
$ npm update react-native-gifted-chat
App.jsを書き換え
Githubからダウンロードした物を利用する場合は、すでに書き換えてあるので、そのままでよいです。
先ほど作成した雛形(myApp)を利用したい方は、中にあるApp.jsを書き換えます。
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: 'こんにちは！',
createdAt: new Date(),
user: {
_id: 2,
name: 'TEST USER',
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: 'ME',
avatar: 'https://placeimg.com/140/140/any'
}}
/>
);
}
}
[ ※ここは注意 ]
ちなみにApp.jsのファイルの最後の行には、Enterで改行してください。
改行が１行無いと動かないです。
動作確認
以下のコマンドで実行します。
# 起動
$ npx react-native run-android
実際に動かしてみた画面です
停止
「 Ctrl + C 」で停止してください。
参考
- サンプルコード
- React-Native公式
- 【React Native】Expo + react-native-gifted-chat でチャットアプリを作る