{"id":15900,"date":"2025-02-20T11:31:31","date_gmt":"2025-02-20T02:31:31","guid":{"rendered":"https:\/\/www.ecomottblog.com\/?p=15900"},"modified":"2025-02-20T11:31:31","modified_gmt":"2025-02-20T02:31:31","slug":"react-native%e3%81%aegifted-chat%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e7%b0%a1%e5%8d%98%e3%81%aa%e3%83%81%e3%83%a3%e3%83%83%e3%83%88%e3%82%a2%e3%83%97%e3%83%aa%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6","status":"publish","type":"post","link":"https:\/\/www.ecomottblog.com\/?p=15900","title":{"rendered":"React Native\u306eGifted Chat\u3092\u4f7f\u3063\u3066\u7c21\u5358\u306a\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u307f\u305f"},"content":{"rendered":"

\u306f\u3058\u3081\u306b<\/h2>\n

\u3053\u3093\u306b\u3061\u306f\u3002
\n\u79c1\u306f\u5165\u793e2\u5e74\u76ee\u306e\u30af\u30e9\u30a6\u30c9\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u958b\u767a\u90e8\u306b\u6240\u5c5e\u3057\u3066\u3044\u308b\u5bfa\u8c37\u3068\u7533\u3057\u307e\u3059\u3002
\n\u4eca\u56de\u306f\u3001React Native\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u300cGifted Chat\u300d\u3092\u6d3b\u7528\u3057\u3066\u3001\u7c21\u5358\u306a\u30c1\u30e3\u30c3\u30c8\u30a2\u30d7\u30ea\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002
\n\u3055\u3089\u306b\u3001Google Sheets\u3092\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u4ee3\u308f\u308a\u306b\u4f7f\u7528\u3057\u3001Google Apps Script\uff08GAS\uff09\u3092\u901a\u3058\u3066\u30c7\u30fc\u30bf\u306e\u9001\u53d7\u4fe1\u3082\u884c\u3063\u3066\u3044\u307e\u3059\u3002
\n\u305c\u3072\u6700\u5f8c\u307e\u3067\u3054\u89a7\u304f\u3060\u3055\u3044\uff01<\/p>\n

<\/p>\n

\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n

\u4eca\u56de\u306f\u30bf\u30a4\u30c8\u30eb\u3067\u7d39\u4ecb\u3057\u305f\u901a\u308a\u300creact-native-gifted-chat\u300d\u3068\u3044\u3046\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u5229\u7528\u3057\u307e\u3059\u3002<\/p>\n

react-native-gifted-chat\u3068\u306f\uff1f<\/h4>\n

react-native-gifted-chat \u306f\u3001React Native\u3067\u7c21\u5358\u306b\u30c1\u30e3\u30c3\u30c8UI\u3092\u5b9f\u88c5\u3067\u304d\u308b\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u30e6\u30fc\u30b6\u30fc\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u9001\u53d7\u4fe1\u3001\u30a2\u30d0\u30bf\u30fc\u8868\u793a\u3001\u30bf\u30a4\u30e0\u30b9\u30bf\u30f3\u30d7\u306e\u7ba1\u7406\u306a\u3069\u3001\u57fa\u672c\u7684\u306a\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u3092\u624b\u8efd\u306b\u69cb\u7bc9\u3067\u304d\u308b\u306e\u304c\u7279\u5fb4\u3067\u3059\u3002\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u8907\u96d1\u306aUI\u306e\u5b9f\u88c5\u3092\u305b\u305a\u306b\u3001\u30b7\u30f3\u30d7\u30eb\u304b\u3064\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u53ef\u80fd\u306a\u30c1\u30e3\u30c3\u30c8\u6a5f\u80fd\u3092\u30a2\u30d7\u30ea\u306b\u7d44\u307f\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n

\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u306f\u4e0b\u8a18\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n

yarn add react-native-gifted-chat\n\u53c8\u306f\nnpm install react-native-gifted-chat\n<\/pre>\n
\u307e\u305f\u3001\u4e0b\u8a18\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3082Gifted Chat\u3067\u5229\u7528\u3059\u308b\u305f\u3081\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
yarn add react-native-get-random-values\nnpm install react-native-get-random-values\uff54<\/pre>\n
\u30c1\u30e3\u30c3\u30c8\u753b\u9762\u306e\u5b9f\u88c5<\/h2>\n
\u6b21\u306b\u3001react-native-gifted-chat\u3092\u4f7f\u7528\u3057\u3066\u30c1\u30e3\u30c3\u30c8\u753b\u9762\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u53c2\u8003\u306b\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n
import React, { useState, useCallback } from 'react';\nimport { GiftedChat, IMessage } from 'react-native-gifted-chat';\nimport { View, StyleSheet } from 'react-native';\n\nconst ChatScreen = () => {\n  const [messages, setMessages] = useState<IMessage[]>([]);\n\n  const onSend = useCallback((newMessages: IMessage[] = []) => {\n    setMessages((previousMessages) => GiftedChat.append(previousMessages, newMessages));\n  }, []);\n\n  return (\n    <View style={styles.container}>\n      <GiftedChat \n        messages={messages} \/\/ \u73fe\u5728\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30d7\u30ed\u30c3\u30d7\n        onSend={(messages) => onSend(messages)} \/\/ \u9001\u4fe1\u30dc\u30bf\u30f3\u3092\u62bc\u3057\u305f\u3068\u304d\u306e\u51e6\u7406\u3092\u6307\u5b9a\n        user={{ _id: 1, name: 'User' }} \/\/ \u81ea\u5206\u306e\u30e6\u30fc\u30b6\u30fc\u60c5\u5831\u3092\u8a2d\u5b9a\uff08_id \u306f\u30e6\u30fc\u30b6\u30fc\u8b58\u5225\u306e\u305f\u3081\u306b\u5fc5\u8981\uff09\n        placeholder=\"\u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u5165\u529b...\" \/\/ \u5165\u529b\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u3092\u6307\u5b9a\n        showUserAvatar \/\/ \u30e6\u30fc\u30b6\u30fc\u306e\u30a2\u30d0\u30bf\u30fc\u3092\u8868\u793a\u3059\u308b\u8a2d\u5b9a\n      \/>\n    <\/View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n  },\n});\n\nexport default ChatScreen;<\/pre>\n
\u30b3\u30fc\u30c9\u306e\u8aac\u660e<\/p>\n