트위터보다

React-Native의 채팅 앱에 대해 기사로했습니다.

목차

환경 구축

명령 설치

라이브러리 설치

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로 줄 바꿈하십시오.
개행이 1행 없으면 움직이지 않습니다.

동작 확인

다음 명령으로 실행합니다.

# 起動
$ npx react-native run-android

실제로 움직여 본 화면입니다.



정지
Ctrl+C로 중지합니다.

참고

샘플 코드

htps : // 기주 b. 코 m / 스스토 스스 / 치타 p

React-Native 공식

htps : // 레아 ct나치ゔぇ. v / cs / 갓찐 g rs d

【React Native】Expo + react-native-gifted-chat 로 채팅 앱 만들기

htps : // 렌노스케씨. 하테나 bぉg. 코m/엔트리/2018/05/27/155309