react native gifted chatダウンロード - react native gifted chatソースコードのダウンロード

ギフテッドチャット

React Native および Web 向けの最も完全なチャット UI

デモウェブ?

スナックギフトチャット遊び場

スポンサー

ファリド・サフィ氏が共同設立したパリのコーディングブートキャンプ

クリックして詳細を確認する

Go で書かれたスケーラブルなチャット API/サーバー

APIツアー | React Native ギフテッドチュートリアル

GiftedChat を備えた完全なアプリエンジン

GitHub をチェックしてください

特徴

? react-native-web対応(0.10.0 以降) Web 設定
TypeScriptで書く (0.8.0 以降)
完全にカスタマイズ可能なコンポーネント
作曲者のアクション (写真の添付など)
以前のメッセージをロードする
メッセージをクリップボードにコピーする
React-native-parsed-text を使用したタッチ可能なリンク
ユーザーのイニシャルとしてのアバター
ローカライズされた日付
複数行のテキスト入力
キーボードを回避する入力ツールバー
Reduxのサポート
システムメッセージ
クイック返信メッセージ (ボット)
タイピングインジケーター

はじめる

インストール

依存関係をインストールする

糸：

yarn add react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

Npm:

npm install --save react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

博覧会

npx expo install react-native-gifted-chat react-native-reanimated react-native-safe-area-context react-native-get-random-values

エキスポ以外のユーザー

npx pod-install

反応ネイティブセーフエリアコンテキストのセットアップ

ガイドに従ってください: 反応ネイティブセーフエリアコンテキスト

反応ネイティブ蘇生のセットアップ

ガイドに従ってください：react-native-reanimated

反応ネイティブビデオとexpo-av

0.11.0以降、両方の依存関係が削除されました。
引き続きvideo提供できますが、 renderMessageVideoプロパティを提供する必要があります。

テスト

TEST_IDは、選択したテストライブラリで使用できる定数としてエクスポートされます。

Gifted Chat はonLayout使用してチャットコンテナーの高さを決定します。テスト中にonLayoutトリガーするには、次のコードを実行します。

 const WIDTH = 200 ; // or any number
const HEIGHT = 2000 ; // or any number

const loadingWrapper = getByTestId ( TEST_ID . LOADING_WRAPPER )
fireEvent ( loadingWrapper , 'layout' , {
  nativeEvent : {
    layout : {
      width : WIDTH ,
      height : HEIGHT ,
    } ,
  } ,
} )

質問がありますか?

この Readme を確認してください。返答があるかもしれません。
まずは StackOverflow で質問してください: https://stackoverflow.com/questions/tagged/react-native-gifted-chat
既存の問題に対する回答を見つける
問題を問題に留めるようにしてください

例

 import React , { useState , useCallback , useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example ( ) {
  const [ messages , setMessages ] = useState ( [ ] )

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

  const onSend = useCallback ( ( messages = [ ] ) => {
    setMessages ( previousMessages =>
      GiftedChat . append ( previousMessages , messages ) ,
    )
  } , [ ] )

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

高度な例

動作するデモについては、 App.tsx参照してください。

「スラック」の例

デフォルトの UI をオーバーライドして Slack に似たものを作成する方法の例については、 example/example-slack-messageのファイルを参照してください。ユーザー名が表示され、すべてのメッセージが左側に表示されます。

メッセージオブジェクト

例: チャットメッセージ

 export interface IMessage {
  _id : string | number
  text : string
  createdAt : Date | number
  user : User
  image ?: string
  video ?: string
  audio ?: string
  system ?: boolean
  sent ?: boolean
  received ?: boolean
  pending ?: boolean
  quickReplies ?: QuickReplies
}

 {
  _id : 1 ,
  text : 'My message' ,
  createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
  user : {
    _id : 2 ,
    name : 'React Native' ,
    avatar : 'https://facebook.github.io/react/img/logo_og.png' ,
  } ,
  image : 'https://facebook.github.io/react/img/logo_og.png' ,
  // You can also add a video prop:
  video : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' ,
  // Mark the message as sent, using one tick
  sent : true ,
  // Mark the message as received, using two tick
  received : true ,
  // Mark the message as pending with a clock loader
  pending : true ,
  // Any additional custom parameters are passed through
}

例: システムメッセージ

 {
  _id : 1 ,
  text : 'This is a system message' ,
  createdAt : new Date ( Date . UTC ( 2016 , 5 , 11 , 17 , 20 , 0 ) ) ,
  system : true ,
  // Any additional custom parameters are passed through
}

例: クイック返信オプションを備えたチャットメッセージ

PR #1211 を参照

 interface Reply {
  title : string
  value : string
  messageId ?: number | string
}

interface QuickReplies {
  type : 'radio' | 'checkbox'
  values : Reply [ ]
  keepIt ?: boolean
}

  {
    _id : 1 ,
    text : 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT' ,
    createdAt : new Date ( ) ,
    quickReplies : {
      type : 'radio' , // or 'checkbox',
      keepIt : true ,
      values : [
        {
          title : '? Yes' ,
          value : 'yes' ,
        } ,
        {
          title : '? Yes, let me show you with a picture!' ,
          value : 'yes_picture' ,
        } ,
        {
          title : '? Nope. What?' ,
          value : 'no' ,
        } ,
      ] ,
    } ,
    user : {
      _id : 2 ,
      name : 'React Native' ,
    } ,
  } ,
  {
    _id : 2 ,
    text : 'This is a quick reply. Do you love Gifted Chat? (checkbox)' ,
    createdAt : new Date ( ) ,
    quickReplies : {
      type : 'checkbox' , // or 'radio',
      values : [
        {
          title : 'Yes' ,
          value : 'yes' ,
        } ,
        {
          title : 'Yes, let me show you with a picture!' ,
          value : 'yes_picture' ,
        } ,
        {
          title : 'Nope. What?' ,
          value : 'no' ,
        } ,
      ] ,
    } ,
    user : {
      _id : 2 ,
      name : 'React Native' ,
    } ,
  }

小道具

messageContainerRef (FlatList ref) - フラットリストへの参照
textInputRef (TextInput ref) - テキスト入力への参照
messages (配列) - 表示するメッセージ
isTyping (Bool) - タイピングインジケーターの状態。デフォルトはfalse 。 renderFooter使用すると、これがオーバーライドされます。
text (文字列) - 入力テキスト。デフォルトはundefinedですが、指定すると GiftedChat の内部状態がオーバーライドされます (redux の場合など。以下の注を参照)
placeholder (String) - textが空の場合のプレースホルダー。デフォルトは'Type a message...'です。
messageIdGenerator (関数) - 新しいメッセージの ID を生成します。デフォルトは UUID v4 で、uuid によって生成されます。
user (オブジェクト) - メッセージを送信するユーザー: { _id, name, avatar }
onSend (関数) - メッセージ送信時のコールバック
alwaysShowSend (Bool) - 入力テキストコンポーザーに送信ボタンを常に表示します。デフォルトはfalse 、テキスト入力が空でない場合にのみ表示されます
locale (文字列) - 日付をローカライズするロケール。まず必要なロケールをインポートする必要があります (つまり、 require('dayjs/locale/de')またはimport 'dayjs/locale/fr' )
timeFormat (String) - レンダリング時間に使用する形式。デフォルトは'LT' (Day.js 形式を参照)
dateFormat (String) - 日付のレンダリングに使用する形式。デフォルトは'll' (Day.js 形式を参照)
loadEarlier (ブール) - infiniteScrollに必要な「以前のメッセージを読み込む」ボタンを有効にします。
onLoadEarlier (関数) - 以前のメッセージをロードするときのコールバック
isLoadingEarlier (Bool) - 以前のメッセージをロードするときにActivityIndicatorを表示します。
renderLoading (関数) - 初期化時にロード中のビューをレンダリングします。
renderLoadEarlier (関数) - カスタムの「以前のメッセージを読み込む」ボタン
renderAvatar (関数) - カスタムメッセージアバター。メッセージのアバターを表示しない場合は、 nullに設定します。
showUserAvatar (Bool) - 現在のユーザーのアバターをレンダリングするかどうか。デフォルトはfalseで、他のユーザーのアバターのみを表示します
showAvatarForEveryMessage (Bool) - false の場合、同じ日に同じユーザーからの連続メッセージがある場合にのみアバターが表示されます。デフォルトはfalseです
onPressAvatar (Function( user )) - メッセージアバターがタップされたときのコールバック
onLongPressAvatar (Function( user )) - メッセージアバターが長押しされたときのコールバック
renderAvatarOnTop (Bool) - 連続するメッセージの下部ではなく上部にメッセージアバターをレンダリングします。デフォルトはfalseです
renderBubble (関数) - カスタムメッセージバブル
renderTicks (Function( message )) - メッセージのステータスを表示するカスタムティックインジケーター
renderSystemMessage (関数) - カスタムシステムメッセージ
onPress (Function( context , message )) - メッセージバブルが押されたときのコールバック
onLongPress (Function( context , message )) - メッセージバブルが長押しされたときのコールバック ( showActionSheetWithOptions()の使用例を参照)
inverted (Bool) - messagesの表示順序を逆にします。デフォルトはtrueです
renderUsernameOnMessage (Bool) - メッセージバブル内にユーザーのユーザー名を表示するかどうかを示します。デフォルトはfalseです
renderUsername (関数) - カスタムユーザー名コンテナ
renderMessage (関数) - カスタムメッセージコンテナー
renderMessageText (関数) - カスタムメッセージテキスト
renderMessageImage (関数) - カスタムメッセージ画像
renderMessageVideo (関数) - カスタムメッセージビデオ
imageProps (オブジェクト) - デフォルトのrenderMessageImageによって作成される<Image>コンポーネントに渡される追加の小道具
videoProps (オブジェクト) - 必要なrenderMessageVideoによって作成されたビデオコンポーネントに渡される追加の小道具
lightboxProps (オブジェクト) - MessageImageのライトボックスに渡される追加の小道具
isCustomViewBottom (Bool) - renderCustomView がテキスト、イメージ、ビデオビューの前か後に表示されるかを決定します。デフォルトはfalseです
renderCustomView (関数) - バブル内のカスタムビュー
renderDay (関数) - メッセージの上のカスタム日
renderTime (関数) - メッセージ内のカスタム時間
renderFooter (関数) - ListView のカスタムフッターコンポーネント。例: 'User is typing...' ;例については、App.tsx を参照してください。 isTypingが true の場合にトリガーされるデフォルトの入力インジケーターをオーバーライドします。
renderChatEmpty (関数) - メッセージが空の場合に ListView にレンダリングするカスタムコンポーネント
renderChatFooter (関数) - MessageContainer の下にレンダリングするカスタムコンポーネント (ListView とは別)
renderInputToolbar (関数) - カスタムメッセージコンポーザコンテナ
renderComposer (関数) - カスタムテキスト入力メッセージコンポーザー
renderActions (関数) - メッセージコンポーザーの左側にあるカスタムアクションボタン
renderSend (関数) - カスタム送信ボタン。たとえば、カスタムアイコンを使用するなど、子を元のSendコンポーネントに非常に簡単に渡すことができます (例)
renderAccessory (関数) - メッセージコンポーザーの下のカスタム 2 行目のアクション
onPressActionButton (関数) - アクションボタンが押されたときのコールバック (設定されている場合、デフォルトのactionSheet使用されません)
bottomOffset (整数) - 画面の下部からチャットまでの距離 (例: タブバーを表示する場合に便利)
minInputToolbarHeight (整数) - 入力ツールバーの最小の高さ。デフォルトは44です
listViewProps (オブジェクト) - メッセージ<ListView>に渡される追加の小道具。一部のプロパティはオーバーライドできません。詳細については、 MessageContainer.render()のコードを参照してください。
textInputProps (Object) - <TextInput>に渡される追加の小道具
textInputStyle (オブジェクト) - <TextInput>に渡されるカスタムスタイル
multiline (Bool) - <TextInput>複数行になることを許可するかどうかを示します。デフォルトはtrue 。
keyboardShouldPersistTaps (列挙型) - タップ後にキーボードを表示したままにするかどうかを決定します。 <ScrollView>ドキュメントを参照してください
onInputTextChanged (関数) - 入力テキストが変更されたときのコールバック
maxInputLength (整数) - メッセージコンポーザーの TextInput の最大長
parsePatterns (関数) - メッセージコンテンツ (URL や電話番号など) のリンクに使用される、react-native-parsed-text のカスタム解析パターン。例:

 < GiftedChat
   parsePatterns = { ( linkStyle ) => [
     { type : 'phone' , style : linkStyle , onPress : this . onPressPhoneNumber } ,
     { pattern : / #(w+) / , style : { ... linkStyle , styles . hashtag } , onPress : this . onPressHashtag } ,
   ] }
 />

extraData (オブジェクト) - オンデマンドで FlatList を再レンダリングするための追加の小道具。これはフッターなどのレンダリングに役立ちます。
minComposerHeight (オブジェクト) - コンポーザーのカスタム最小高さ。
maxComposerHeight (オブジェクト) - コンポーザーのカスタム最大高さ。

scrollToBottom (Bool) - 最下部のコンポーネントへのスクロールを有効にします (デフォルトは false)
scrollToBottomComponent (関数) - カスタム Scroll To Bottom コンポーネントコンテナ
scrollToBottomOffset (整数) - Scroll To Bottom コンポーネントの表示を開始するカスタムの高さのオフセット (デフォルトは 200)
scrollToBottomStyle (オブジェクト) - Bottom Component コンテナのカスタムスタイル
alignTop (ブール値)メッセージバブルをチャットの上部に表示するかどうかを制御します (デフォルトは false - バブルは下部に揃えられます)
onQuickReply (関数) - クイック応答を送信するときのコールバック (バックエンドサーバーに)
renderQuickReplies (関数) - すべてのクイック返信ビューをカスタマイズします
quickReplyStyle (StyleProp) - カスタムのクイック返信ビュースタイル
renderQuickReplySend (関数) - カスタムのクイック返信送信ビュー
shouldUpdateMessage (関数) - 通常のケース以外でいつ更新するかをメッセージコンポーネントに知らせます。
infiniteScroll (ブール値) - メッセージコンテナーの最上部に達すると上に無限にスクロールし、onLoadEarlier 関数が存在する場合は自動的に呼び出します (Web ではまだサポートされていません)。 loadEarlierプロパティも追加する必要があります。
isStatusBarTranslucentAndroid (Bool) - Android で半透明のステータスバーを使用する場合は、このオプションを true に設定します。 iOSでは無視されます。

Reduxに関する注意事項

messagesプロップは、そのまま Redux で動作するはずです。ほとんどの場合、必要なのはこれだけです。

textプロップを指定することにした場合、 GiftedChat は独自の内部text状態を管理しなくなり、プロップに完全に従うことになります。これは Redux などのツールを使用する場合には便利ですが、追加の手順が 1 つ必要です。単にonInputTextChanged実装して、入力イベントを受信しイベントをリセットするだけです (例: onSendテキストをクリアするため)。

 < GiftedChat
  text = { customText }
  onInputTextChanged = { text => this . setCustomText ( text ) }
  /* ... */
/>

Androidの注意事項

Create React Native App / Expo を使用している場合、Android 固有のインストール手順は必要ありません。このセクションはスキップできます。それ以外の場合は、プロジェクト構成を次のように変更することをお勧めします。

AndroidManifest.xmlにandroid:windowSoftInputMode="adjustResize"があることを確認してください。

< activity
  android : name = " .MainActivity "
  android : label = " @string/app_name "
  android : windowSoftInputMode = " adjustResize "
  android : configChanges = " keyboard|keyboardHidden|orientation|screenSize " >

Expoの場合、それを修正するための解決策が少なくとも 2 つあります。
- GiftedChat の後にKeyboardAvoidingViewを追加します。 KeyboardAvoidingView GiftedChat にすでに組み込まれている iOS キーボード回避と競合する可能性があるため、これは Android に対してのみ行う必要があります。例:

 <View style={{ flex: 1 }}>
   <GiftedChat />
   {
      Platform.OS === 'android' && <KeyboardAvoidingView behavior="padding" />
   }
</View>

React Navigation を使用する場合は、ナビゲーションヘッダーとタブを考慮して追加の処理が必要になる場合があります。 KeyboardAvoidingViewのkeyboardVerticalOffsetプロパティをナビゲーションヘッダーの高さに設定でき、キーボードが起動しているときにタブバーが表示されないようtabBarOptions.keyboardHidesTabBarを設定できます。ノッチのある Android スマートフォンでは高さの計算にバグがあるため、ウィンドウの高さの計算を伴う他のソリューションよりもKeyboardAvoidingViewお勧めします。

app.json に不透明な背景のステータスバーを追加します (Expo の Android アプリではandroid:windowSoftInputMode="adjustResize"が内部的に設定されていますが、半透明のステータスバーにより機能しません): https://docs.expo.io/versions /latest/guides/configuration.html#androidstatusbar
Modal内でGiftedChatを使用する予定がある場合は、#200 を参照してください。

ローカル開発に関する注意事項

ネイティブ

yarn global add expo-cliインストールする
依存関係yarn install
expo start

反応ネイティブウェブ

エキスポ付き

yarn global add expo-cliインストールする
依存関係yarn install
expo start -w

スナックバージョンのアップグレード

create-react-app を使用する

yarn add -D react-app-rewired
touch config-overrides.js

 module . exports = function override ( config , env ) {
  config . module . rules . push ( {
    test : / .js$ / ,
    exclude : / node_modules[/\](?!react-native-gifted-chat|react-native-lightbox|react-native-parsed-text) / ,
    use : {
      loader : 'babel-loader' ,
      options : {
        babelrc : false ,
        configFile : false ,
        presets : [
          [ '@babel/preset-env' , { useBuiltIns : 'usage' } ] ,
          '@babel/preset-react' ,
        ] ,
        plugins : [ '@babel/plugin-proposal-class-properties' ] ,
      } ,
    } ,
  } )

  return config
}