React용 Sendbird UIKit 둘러보기: 알아야 할 필수 구성 요소 및 모듈

앱 내 빌드 chat 고급 게임, 소매, 디지털 건강이든 온디맨드을 위해 빌드하든, 소화된 UI 웹 또는 모바일 앱용.센드버드 UIKIT| 적절한 채팅 UI를 더 쉽게 얻을 수 있습니다.|54:React용 센드버드 UIKITReact용 Sendbird UIKit는 Sendbird SDK에서 사전 빌드된 UI 요소를 구성 받아 매력적인 건설 채팅 경험을 수 있는 것입니다.React용 UIKit은 개발자가 방식으로 원하는 것과 같으며 간소화된 채팅 도우미를 찾는 데 필요한 것을 수 있게 해 줄 수 있어야 합니다.

이 블로그에서는 React용 센드버드 UIKit의 구성 및 각 사용 사례에 대해 알아보겠습니다.이 블로그를 마치면 이러한 구성 성을 구현하여 사용자 지정 정의를 이해하게 될 것입니다.

다음 비디오 튜토리얼도 유용할 것입니다.

React용 UIKit: 환경 설정

계속 |112:Sendbird 대시보드Sendbird 대시보드 고급

다음으로 create-react-app을 통해 새 프로젝트 환경을 만드세요.그런 다음 Sendbird 대시보드에서 앱 생성 ID, 사용자 ID 및 닉네임을 저장할.env 파일을 추가합니다.이제 npm yarn을 센드버드 통한 UIkit을 설치하세요:

React용 UiKit이 설치한 것에 대해 cont를 통한 구현을 시도합니다.가장 먼저 살펴보는 것은 앱 구성 요소입니다.

앱 구성 요소

앱 구성 요소에 대한 기능적 채팅 인터페이스를 만드는 UI 구성 요소 모음입니다.앱 앱 구성, 하나의 요소 구성 등에 채널 목록, 채널 대화 및 채널 설정 모두 포함되는 뷰 렌더링합니다.

이 기능을 사용하는 App.js 파일의 Uikit 구성 요소 SendbirdApp과 Uikit StyleClement를 가져오세요.

앱 구성 요소 사용 가능한 앱 ID와 사용자 ID를 전달해야 합니다.다음 코드는 앱 구성 요소를 사용하는 방법을 보여줍니다.

그런 다음 스타일시트에서 채팅 인터페이스의 높이와 너비를 지정합니다.

이 스타일시트 요소 App.js 대상 요소를 가져와야 합니다.

이제 새 채널을 만들고 메시지를 보낼 수 있는 채팅 애플리케이션이 성공적으로 실행되고 있습니다.다음과 같아야 합니다.

채팅 환경을 지정하려면 핵심 및 모듈 구성해야 합니다.먼저 핵심 구성 내용을 살펴보겠습니다.||279:React용 UIKit의 핵심 구성 요소

React용 UIKit의 핵심 구성 요소

핵심 구성 요소는 UIKit의 주요 구성 요소입니다.핵심 구성 요소에는 SendBirdProvider, SendBirdSelector, UserSendBirdState 컨텍스트 및 withSenbird () 가 포함됩니다.이들 각각은 애플리케이션을 실행하는 데 필요한 모든 데이터를 저장하고 작동합니다.

핵심 구성 요소는 어떻게 작동합니까?Chat SDK #인스턴스에서 데이터 가져오고, Sendbird 서버 맞히기, 뷰에서 발생한 이벤트 관련 질문과 통신하고, 기능 #지역화 구성합니다.이렇게 구성 해서 만드는 데 사용해도 UI를 찾거나 보여드리지 않습니다.여기 ########################################################>>>>>>>>>>>

The SendbirdProvider는 컨텍스트 지원 채팅 SDK 데이터 상태 현재 하위 구성하기 가장 중요한 핵심 구성 요소입니다.전체 방송 센드버드 데이터 출연 수 수 전에 SendbirdProvider가 최상위 레벨에 있습니다.

SendBirdProvider를 사용하면 useSendbirdStateContext() SendBirdProvider의 하위 구성 요소에서 자바스크립트용 센드버드 채팅 SDK를 구현하기 위한 구성 요소입니다.useSendBirdStateContext 구성 요소를 사용하면 SendBirdProvider의 상태에 액세스하여 SDK 액션에 연결하고 SendBirdSelector와 함께 사용하여 메시지 전송 또는 업데이트와 같은 기능을 구현할 수 있습니다.

Before the UIKit v4, the withSendbird() 구성 대상자 채팅 SDK와 모듈 간에 전달된 데이터를 사용하였지만 UIKit 업데이트에서는 대신 useSendbirdStateContext () 를 사용하는 것이 좋습니다.

마지막으로 SendBirdSelectors 데이터 작업은 작업을 수행하는 데 SDK를 사용할 수 있습니다.main selector functions include getSdk, getCreateOpenChannel, and getDeleteMessage.

핸들러

UIKit는 클라이언트 발생 활동 앱에서 이벤트를 진행하며 다양한 이벤트 진행을 할 수 있습니다.||296:Chat SDKChat SDK에서 v314:에서 v314:로 v314:로 확장한, Uikit는 SDK 이후 채널에서 호출하는 대신 받을 수 있는 것으로 받은 채널 이벤트 핸들러구현을 했습니다.채널 이벤트, 딜러 연결 핸드러, 채널 오픈 핸드러, 채널 채널 채널 핸드러 포함합니다.다음으로 SDK는 세션 핸들러 세션 토론을 갱신하려면세션 토론은 채팅 SDK가 사용자를 Sendbird ser에 제대로 캐스팅하기 전에 사람을 캐스팅하기 전에 응답하는 사람을 기다리는 데 데 @Sendbird ser를 제대로 캐스팅하기 전에 사람을 은퇴시키는 데 데.

React용 UIKit의

UIKIT의 핵심 구성 요소에 대해 배웠더니 이제 Module에 대해 알아보고 Module이 핵심 구성 및 함께 작동하는 것에 대해 알아보는 것이 중요합니다. 모듈 사용자 지정 가능한 UI에는 스마트 구성 요소를 제공하는 것입니다.이 Module은 스마트 구성 요소를 제공하는 작동합니다.이 Module에서는 스마트 구성 요소를 제공하는 작동합니다.이 Module은 도구적인 채팅 제공자 및 사전 요소 빌드된 구성 UI 포함 포함.

UIKIT의 8 청결은 다음과 같습니다.

1. 채널 목록
2. 채널 만들기
3. 그룹 채널
4. 그룹 채널 설정
5. 오픈 채널
6. 채널 설정 열기
7. 메시지 검색
8. 사용자 프로필 편집

각 유형에는 컨텍스트 지원자와 UI 구성 요소 세트가 있습니다.제공자는 채팅 SDK에서 필요한 데이터를 관리합니다.UI 구성 요소 간 데이터 전달하기 위해 useContext 사용합니다.모든 요소 구성요소 제공자의 출처를 위해 useContext 사용합니다.모든 요소 구성 요소 제공자의 발굴 수 수 있도록 하는 기본 구성 요소 후각이 다음에 소각 요소 구성요소가 제공자의 발굴 수 수 있어야 합니다.모든 요소 구성요소가 제공자의 발굴 수 수 있도록 하는 소각 요소 구성요소 설정과 관련된 사용자 중심 제공자 지정 모든 UI 구성 요소를 #사용자 지정할 수 없습니다.

채널 목록

|335:채널리스트 채널리스트| 는 자신이 현재 속한 그룹 채널 목록을 보여줍니다.채널 목록의 일부 속성은 채널 만들기 전, 채널 선택 및 렌더링 채널 미리 보기 등.

onBeforeCreateChannel 및 onChannelSelect 속성을 사용하면 사용자가 UIKit의 사용자 인터페이스와 상호 작용할 때 작업을 수행할 수 있습니다. renderChannelPreview 속성을 사용하면 채널 미리보기의 기본 UI를 사용자 지정 구성 요소로 바꿀 수 있습니다. 이것은 단순히 채널 목록에 사용자의 닉네임이 표시되도록 채널 미리보기를 설정하는 데 사용할 수 있습니다.

이 모듈에 사용되는 컨텍스트 공급자는 ChannelListProvider .이 공급자는 채널 목록 보여서 활용 로직과 데이터 관리합니다.콘택에서 채널 목록만 보도록 하면 되는 채널리스트, 모듈을 포함한 채널 목록 보기, 같은 채널 목록 제공 업체에서 모두 래핑하면 필요한 데이터를 채널리스트로 전달합니다.

UsChannelListContextUsChannellistContext 후크를 먹어 제공자의 데이터 확인합니다.ChannellistContext의 일부 속성은 기초화, 로드 현재 채널입니다.

The UI components that make up the ChannelList view are ChannelListUI, ChannelListHeader, and ChannelPreview. The channellistui은 헤더 및 채널 미리보기를 포함한 모듈의 기본 화면을 보여줍니다.여기에는 RenderHeader, RenderPlaceHolderError 및 RenderPlaceHolderLoading과 같이 사용할 속성 목록이 포함되어 있습니다.더 channellisheader은 제목과 새 채널을 만들기 위한 버튼을 표시하는 채널리스트 UI의 헤더입니다.이 UI에서 사용할 수 있는 세 가지 속성은 히터, 렌더 아이콘 버튼 및 프로파일편집입니다.|ChannelPreview UI 구성 요소 채널 목록에 단일 채널 표시합니다.채널, 속성은 채널 미리보|

다음은 ChannelListProvider 및 useChannelListContext를 사용하여 ChannelList를 구현하는 방법입니다.

이 채널 목록 구성 요소의 기본 디자인입니다.

CreateChanel

CreatechannelCreateChannel 한정된 새 그룹 채널을 만드는 데 사용합니다.채널을 만드는 데 사용합니다.채널 안 되는 채널URL 성별을 보내야합니다.추가 옵션 속성으로는 onChannel, OnChannel 및 OnCancel 등이 있습니다.이 세 번째 옵션 속성은 모두 속성은 UiKit의 모든 속성은 사용자 동작에서 직접 사용자 인터페이스 실행하여 직접 작업을 수행하며 수 있습니다.

예를 들어 onBeforeCreateChannel을 사용하면 사용자가 클릭하여 그룹 채널을 만들 때와 새 채널을 생성하기 전에 호출되는 함수를 트리거할 수 있습니다.예를 들어, 호출된 함수는 생성 중인 채널의 그룹 이미지를 설정할 수 있습니다.OnCreateChannel 속성을 사용하면 채널을 만든 직후에 작업을 구현할 수 있습니다.이를 사용하여 채널이 생성되면 화면에 성공 메시지를 표시할 수 있습니다.'취소' 버튼을 클릭했을 때 이벤트를 트리거하려면 onCancel 속성을 사용할 수 있습니다.여기에서 사용자 지정 UI를 구현하도록 선택하고 함수를 호출하여 채널 생성을 취소할지 여부를 묻는 뷰를 렌더링할 수 있습니다.

그룹 채널 int 공급자와 UI 구성 요소 등에 대한 데이터 전달 수 있는 두 개의 콘텐츠 객체>CreateCreatechannel|및 UCECreatechannel| 후크입니다.채널 제공 방법 속성입니다.추가 선택 자로는 OnCreatechhannel, On beforecreateChannel, On beforecreateChannel nel 및 쿼리. 애플리케이션UserlistQuery가 있습니다.

The UI components that compose the CreateChannel view are CreateChannelUI, InviteMembers, and SelectChannelType. CreateChannelUI and SelectChannelType are used together to show the first step of CreateChannel module. InviteMembers displays the second step after the channel is created. CreateChannelUI 취소 시, 첫 번째 특성을 렌더링합니다. SelectChannelType 현재 사용자가 생성할 채널 유형을 선택할 수 있는 뷰를 렌더링합니다.사용자 초대 현재 사용자가 채널에 참여하도록 다른 사람을 초대할 수 있는 것을 표시합니다.채널 유형 선택과 회원 초대에는 모두 취소 성향이 있습니다.

다음 코드는 CreateChannelProvider 및 useCreateChannel 후크와 함께 CreateChannel 모듈을 사용하는 방법을 보여줍니다.

아래는 채널 만들기 모듈의 기본 레이아웃입니다.

채널

|457:채널Chanel 둘은 그룹 대화 표시합니다.사용자는 채널의 구성원으로 초대된 것이 아니면 그룹 출연 채널에 수 채널URL 속성을 설정해야 합니다.기타 선택 속성으로는 반응가능, 검색 아이콘 보기, 이전 켜기 사용자 메시지 등.

isReactionEnabled 및 showSearchIcon 속성은 기능이 사용되고 표시되는지 여부를 제어합니다. onBeforeSendUserMessage 속성은 사용자가 메시지를 보내기 위해 클릭할 때 백그라운드에서 사용자 지정 논리를 실행하는 데 사용할 수 있지만 메시지가 채널로 전송되기 전에 작업을 완료합니다. 따라서 메시지 보내기를 클릭하면 전달한 기능을 트리거하여 작업을 완료한 다음 메시지를 보냅니다. 이는 전송되는 메시지의 텍스트를 확인하고 특정 단어가 포함된 경우 메시지가 전송될 때 애니메이션을 트리거하는 경우에 유용할 수 있습니다.

그룹 채널을 구축하는 데 사용되는 데이터를 저장하고 관리하는 데 사용되는 두 개의 컨텍스트 객체는 channel Provider 및 UsChannelContext후크입니다.채널 제공자에는 채널 URL 특성, 이것은 메시지 그룹화 활성화됨, IS 반응 지원 및 하이라이트된 메시지와 같은 추가 성격을 포함합니다.채널 컨텍스트 사용 컨텍스트 컨텍스트 사용 컨텍스트 컨텍스트 컨텍스트 사용 컨텍스트 성경의 선택적 속점 URL, 시작 채널 메시지 보내기 전 채널 메시지 보내기 전 가 등.

The UI components in the Channel module are ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator, and UnreadCount. ChannelUI 모듈의 기본 화면을 표시하며 RenderPlaceHolderLoader와 같은 여러 속성이 있습니다., 렌더링 메시지 입력 및 렌더링 입력 표시기. 채널 헤더는 채널 제목, 메시지 검색 아이콘 및 채널 정보 아이콘을 표시하는 ChannelUI 구성 요소 헤더입니다.MessageInput|433:은 사용자가 메시지를 입력하거나 파일 메시지를 보낼 수 있는 구성 요소입니다.|

Messagelist그룹 모든 메시지라고 할 수 있습니다.렌더 메시지, 렌더 플레이스 홀더가 비어 있고 렌더 사용자 지정 연산자의 세 가지 특성이 있습니다. FileViewer 이미지 또는 비디오 파일 포함 메시지를 모두 표시해서 OnCancel과 message라는 두 가지 다른 특성을 가지게 되었습니다. FrozenNotification|439:Message|는 사용자에게 현재 채널이 정지되었음을 알리는 배너를 표시하는 구성 요소입니다. Message 는 채널에 단일 메시지를 표시하는 메시지 목록 내의 구성 요소입니다.메시지 특성? 는 연산자, 체인 탑 및 렌더링된 것과 같은 추가 선택 특성을 가지고 있습니다. RemoveMessageModal 선택한 메시지가 채널에서 삭제될 것임을 확인하는 모달을 보여주며, onCancel 및 message라는 두 가지 선택적 속성이 있습니다. TypingIndicator 채널에서 메시지를 현재 입력 중인 구성원을 표시합니다.마지막으로 Unreadcount 채널에 읽지 못한 몇 개 표시합니다.unreadcount의 속성은 개수 시간, onClick입니다.

다음 채널제공자를 위한 것은 다음 채널 제공자를 통해 전달하고 채널컨텍스트를 사용하는 것입니다.

채널 구성 요소의 기본 레이아웃입니다.

채널 설정

더 채널 설정 모듈은 그룹 채널 정보 및 설정 옵션 메뉴를 표시합니다.구성원은 구성원 목록을 확인하고, 채널에 사용자를 초대하고, 채널에서 나갈 수 있습니다.채널 운영자인 사용자는 설정에서 운영자 추가 또는 삭제, 회원 차단, 뮤트 및 차단된 사용자 목록 보기, 채널 탈퇴 또는 정지 등의 추가 옵션을 사용할 수 있습니다.

ChannelSettings에는 channelUrl 속성이 필요하며 onCloseClick, onChannelModified 및 renderLeaveChannel과 같은 선택적 속성이 있습니다. onCloseClick 및 onChannelModified 속성은 UI 자체에서 발생하는 이벤트에 의해 트리거되고 전달한 사용자 지정 논리를 실행합니다. 사용자가 버튼을 클릭하여 설정 표시줄을 닫는 이벤트에서 onCloseClick을 활용할 수 있습니다. 설정 구성 요소를 표시하지 않도록 UI를 수정하려는 함수를 전달할 수 있습니다. 설정이 변경된 후 이벤트를 발생시키려면 onChannelModified 속성을 활용하여 성공 메시지를 화면에 렌더링할 수 있습니다. ChannelSettings를 사용할 때 '채널 나가기' 버튼 디자인을 변경할 수 있습니다. 사용자 지정 UI를 설정 모듈에 전달할 수 있는 renderLeaveChannel 속성을 사용하여 그렇게 할 수 있습니다.

The two context objects to build a channel settings menu for this module are the ChannelSettingsProvider and useChannelSettingsContext. The 채널 설정 공급자 채널 URL을 전달해야 합니다.이 공급자의 다른 옵션으로는 OnClose Click, OnBeforeUpdate Channel 및 InvalidChannel이 있습니다.useChannelSettingsContext hook has multiple properties that can be used, such as onCloseClick, onChannelModified, and onBeforeUpdateChannel.

이 모듈에 대한 채널 설정 메뉴를 구축하기 위한 두 개의 컨텍스트 개체는 ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel, and UserListItem. ChannelSettingSUI 채널 프로필 보기, 조정 메뉴 보기 및 채널 나가기 버튼 포함 표시합니다.구성 요소에는 렌더플레이스홀더, 오류 렌더 채널 프로파일, 렌더 모더레이션 패널 및 렌더리브 채널 네 가지 적합한 색상이 있습니다.더 조정패널 채널 운영자를 위한 설정 메뉴 보기를 만듭니다.여기에는 운영자, 회원, 음소거 및 차단된 사용자 목록, 채널 정지 전환 버튼, 채널 탈퇴 옵션이 포함됩니다.UserPanel 구성 요소는 채널 구성원을 위한 설정 메뉴 보기를 생성합니다. 여기에는 구성원 목록, 채널에 다른 사용자를 초대하는 옵션, 채널에서 탈퇴하는 옵션이 포함됩니다.channelprofile 컴포넌트는 사용자가 채널 정보를 변경할 수 있도록 채널 제목, 이미지 및 편집 버튼을 포함하는 채널 프로필 보기를 생성합니다. EditDetailSmodal 사용자가 채널 이름은 프로필 이미지 이미지 수 있는 모월을 표시합니다.수 있는 두 가지 옵션 속성 (OnSubmitmit과 On Cancel) 이 있습니다.LeaveChannel| 사용자가 설정 메뉴 채널 떠나기를 연 사용자에게 이 작업을 확인하게 되면 이를 확인하게 되면 함께 모달이 확인됩니다.LeaveChannel을 사용할 수 있는 onSubmit on Cancel 생각이 있습니다.|<> | 536:사용자 목록 항목UserListItem 사용자 목록 내의 개별 사용자 표시합니다.이 구성 요소에는 사용자 속성을 설정해야 하고 현재 사용자, 클래스 이름 및 액션이라는 세 가지 특정 요소가 있습니다.

다음은 ChannelSettingsProvider 및 useChannelSettingsContext를 사용하여 ChannelSettings 모듈을 구현하는 방법입니다.

다음은 채널 설정의 비운영자를 위한 기본 UI입니다.||580:자를 위한 기본 설정 UI

채널 관리 위한 채널 설정을 위한 채널 설정

Openchannel|<> |634:공개 되는 채널은 개인을 위한 수 있는 공개 채널입니다.

개방형 채널은 채팅 내에서 상호 작용하는 많은 수의 사용자를 처리할 수 있는 공개 채널입니다. OpenChannel 모듈에는 channelUrl 속성 이 필요하며 children, isMessageGroupingEnabled, messageLimit 및 renderUserProfile과 같은 다양한 선택적 속성이 있습니다.

child 속성은 OpenChannelProvider에서 제공하는 데이터인 OpenChannel의 하위 구성 요소를 보여줍니다.IsMessageGroupingEnabled 속성은 기능이 활성화되었는지 확인하여 UI를 표시하는 방법을 알 수 있도록 합니다.메시지 그룹화가 활성화된 경우 1분 이내에 전송된 각 메시지가 하나의 메시지로 그룹화됩니다.MessageLimit 속성은 채널의 OpenChannelMessageList 구성 요소에 저장될 최대 메시지 수를 제공합니다.사용자의 아바타를 클릭할 때 프로필 미리 보기를 사용자 지정하려면 RenderUserProfile 속성을 사용하여 기본 디자인을 재정의하여 사용자 고유의 UI 구성 요소를 전달하면 됩니다.

OpenChannel 모듈에서 데이터를 저장하고 처리하는 데 사용할 수 있는 컨텍스트 객체는 OpenChannelProvider이며 OpenChannel 후크를 사용합니다.OpenChannelProvider에는 ChannelURL 속성을 설정해야 합니다.일부 선택적 속성에는 IS 메시지 그룹화 활성화, 메시지 제한 및 OnChatHeaderActionClick이 포함됩니다.useOpenChannelContext 콘센트 후크에는 렌더 사용자 프로필, 현재 오픈 채널 및 AllMessage와 활용 등 수 있는 여러 가지 현상이 있습니다.

The set of UI components that make up the OpenChannel module are OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList, and OpenChannelMessage. OpenChannelUI Module의 기본 화면과 열린 채널의 헤더, 메시지 및 메시지 목록 표시합니다. openChannelUI에는 RenderMessage, 렌더헤더 및 렌더입력과 같은 특성 목록이 있습니다. openChannelHeader 채널 제목과 정보 아이콘을 렌더링합니다. openChannelInput 여기서 사용자는 이미지, 비디오 또는 문서와 같은 메시지 또는 파일 메시지를 보낼 수 있습니다.OpenChannelMessageList 열린 채널의 모든 메시지 목록을 표시합니다.renderMessage와 renderplaceholderEmptylisteEmptyList를 두 개 모두 찾을 수 있습니다. OpenChannelMessage 채널의 개별 메시지를 보여줍니다.이 구성 요소에는 메시지 속성이 필요하며 HasPerator, ChainTop 및 EditDisablead와 같은 여러 가지 선택적 속성이 있습니다.

다음은 OpenChannelProvider 및 useOpenChannelContext와 함께 OpenChannel 모듈을 사용하는 방법입니다.

오픈 채널의 기본 디자인은 다음과 같습니다.

OpenChannelSettings

the ||647:OpenChannelSettingsOpenChannelSettings동일한 경우 작업 이름, 채널 이미지, URL 설정, URL 주소 제공과 같은 제공과 관리 추가 또는 제거, 뮤트 및 차단된 목록 사용자 보기, 초대자 뮤트 금지, 채널 옵션 등의 삭제 등을 추가 할 수 없습니다.

OpenChannelSettings에는 channelUrl 속성을 전달해야 합니다. 제공된 몇 가지 다른 속성은 onChannelModified, onDeleteChannel 및 onCloseClick입니다. 이러한 속성은 사용자가 UI의 특정 특성과 상호 작용할 때 일련의 작업을 실행합니다. 열린 채널 설정에서 onCloseClick을 사용하여 설정 표시줄을 닫은 상태로 설정하고 채팅 보기에서 설정 구성 요소를 제거할 수 있습니다. 동일한 아이디어가 onChannelModified 및 onDeleteChannel을 사용할 때도 적용됩니다. 여기서 사용자가 편집한 내용을 저장하기 위해 클릭하거나 버튼을 클릭하여 채널을 삭제하면 응용 프로그램의 UI를 수정하여 맞춤 구성요소가 화면.

The two context objects used to build a functional channel settings menu are the OpenChannelSettingsProvider and useOpenChannelSettingsContext hook. The OpenChannelSettingsProvider 에는 채널 URL 전달이 필요하며, 여기에는 OnBeforeUpdate Channel, DisableUpdate Channel, DisableUser Profile 및 RenderUser Profile과 같은 추가 속성이 포함됩니다.useOpenChannelSettingsContext 후크에는 OnDeleteChannel, OnChanelModified 및 SetChannel 과 같은 속성 목록이 있습니다.

The UI components 전체 오픈 채널 설정 모듈을 구성하는 것은 오픈 채널 설정 UI, 오퍼레이터 UI, 참가자 UI, 오픈 채널 프로필 및 편집 세부 정보 모듈입니다. >OpenChannelSettingsUI 운영자 UI가 있는 MOUL의 기본 화면 표시.및 참가자 UI.오픈 채널 설정 UI의 두 가지 대상 선택 속성은 렌더 오퍼레이터 UI와 렌더 참가자. OperatorUI 채널 자를 위한 채널 설정을 보여 주는 성인 렌더채널 프로필 속도. Participantui 열린 채널의 참가자 목록을 표시합니다. Openchannelprofile 채널 제목과 이미지를 표시하는 채널 프로필 보기를 만듭니다. DetailsEditModals를 편집하다: 세부 정보 편집 모달 | > 사용자가 채널 이름과 프로필 이미지를 편집하려고 할 때 나타납니다.취소 버튼을 클릭하면 트리거될 수 있는 onCancel 속성이 있습니다.

다음 코드는 OpenChannelSettingsProvider 및 useOpenChannelSettingsContext와 함께 OpenChannelSettings 모듈을 활용하는 방법입니다.

오픈 채널 설정은 다음과 같이 표시됩니다.

메시지 검색

|765:MessageSearchMessageSearch MoDelu는 사람이 아닌 메시지를 검색할 수 있습니다.자신이 속한 채널.메시지 검색에는 채널 URL 속성을 설정해야 합니다.결과를 불러오면 결과를 클릭하면 플레이스홀더 빈 목록과 같은 추가 옵션이 렌더링됩니다. properties are available to use such as onResultLoaded, onResultClick, and renderPlaceholderEmptyList.

MessageSearch 모듈을 사용할 때 채팅 상단에 팝업 레이어로 표시되는 별도의 UI 창에 모든 검색 결과를 표시하고 싶을 수 있습니다.결과를 받은 후 함수가 호출되는 onResultLoaded 속성을 사용하여 이 작업을 수행할 수 있습니다.OnResultClick을 사용하면 사용자가 검색 결과를 선택한 후 사용자 지정 로직을 실행할 수 있습니다.RenderPlaceHolderEmptyList 속성을 사용하면 검색 목록에 결과가 없는 경우 자리 표시자를 위한 사용자 지정 UI를 만들 수 있습니다.따라서 검색 목록에 나열할 항목이 없는 경우 알림이 표시되도록 할 수 있습니다.

MessageSearch의 경우 MessageSearchProvider 및 useMessageSearch 후크를 사용하여 메시지 검색 UI를 구축하는 데 사용되는 데이터를 저장하고 관리할 수 있습니다. MessageSearchProvider 에는 channelUrl을 지정해야 하며 onResultClick, messageSearchQuery 및 onResultLoaded와 같은 추가 선택적 속성이 있습니다. useMessageSearchContext 후크에는 onResultLoaded, requestString 및 selectedMessageId와 같은 여러 선택적 속성이 있습니다 .

The MessageSearchUI메시지 검색 모듈의 유일한 검색 UI 구성 결과를 얻게 되었습니다.

MessageSearchProvider를 사용하여 MessageSearchContext를 사용하여 MessageSearchContext를 구현하는 방법은 다음과 같습니다.

메시지 검색 모델의 기본 UI는 다음과 같습니다.

사용자 프로필 편집

822: |822:822:823:사용자 프로필 편집EditUserProfile 모듈은 현재 상태를 허용합니다. 사용자가 프로필을 변경할 수 있습니다.자신의 아바타를 클릭하면 프로필 정보가 포함된 팝업 창이 나타납니다.여기에서 사용자는 프로필 이미지, 닉네임을 편집하고 테마를 밝거나 어두운 모드로 전환할 수 있습니다.

사용자 프로필 편집에는 4가지 선택 사항이 있습니다. 자식, onCancel, onThemeChange 및 onEditProfile을 포함하는 속성 입니다. children 속성은 EditUserProfileProvider가 제공하는 EditUserProfile의 하위 구성 요소를 보는 데 사용됩니다. onCancel은 사용자가 편집한 내용을 취소하기 위해 클릭하여 UI가 트리거될 때 작업을 실행하는 데 사용됩니다. 채팅이 밝은 모드인지 어두운 모드인지에 따라 추가 스타일을 추가하려면 onThemeChange를 사용하여 사용자가 테마를 변경하기 위해 클릭할 때 사용자 지정 CSS를 구현하는 함수를 호출할 수 있습니다. 마지막으로 onEditProfile을 사용하면 사용자가 프로필을 업데이트하면 일련의 작업을 구현할 수 있습니다.

uikit은 EditUserProfileProvider and useEditUserProfileProviderContext 후크를 EditUserProfile 모듈의 컨텍스트 객체로 제공합니다.둘 다 EditUserProfile과 동일한 선택적 속성을 사용할 수 있습니다: children, OnCancel, Mechange와 OneEdit Profile.

The only UI component in the EditUserProfile module is EditUserProfileUI이며, 이 구성 요소는 사용자 프로필 보기를 렌더링합니다.

EditUserprofile의 것은 기본적으로 다음과 같습니다.

결론 및 다음 단계

ReactSendbird UIKit에서 핵심 구성 및 자세히 알아볼 필요가 있는 다양한 다양한 사례를 들어보세요.이 강력한 기반 기반 기반 기반 기반 기반 기반 기반 기반 설계 및 설계 가능한 각 요소를 고려했습니다.이 강력한 기반 기반 기반 기반 설계 및 설계 요소를 고려했습니다.이 강력한 기반 기반 기반 기반 기반 설계 및 설계 요소를 고려했습니다.예, 블로그 React용 센드버드 UIkit을 사용하여 왓츠앱 메신저 클론을 건설하는 것에 대해 설명합니다.이 블로그에서는 이 블로그 게시물에 논의한 핵심 구성 및 요소 모듈이 아닌 WhatsApp과 맞춤형 경험을 쌓아 이해하게 될 것입니다.

For more information, please check out our docs or explore the wealth of UIKIT 튜토리얼 우리의 개발자 페이지를 살펴보세요. portal. ||830:Sendbird UIKitSendbird UIKit에 대한 도움이 필요하면 커뮤니티 포럼 또는 문의처.당사의 전문가들이 항상 도와드릴 준비가 되어 있습니다!

즐거운 채팅 만들기 되세요!✨