时间戳

首页 > 解决方案 > 带有按钮的自定义工具栏 GiftedChat

reactjs - 带有按钮的自定义工具栏 GiftedChat

问题描述

我使用了库“ GiftedChat ”。我想用这个- InputToolBar 进行聊天的底部，在带有5个按钮的容器下方，其中一个是发送消息的按钮

如何在组件之间正确分配它？

标签： reactjsreact-nativechatreact-native-gifted-chat

解决方案

如果我理解正确，您想知道如何组织此代码

首先，您根本不需要 a<View>来包装您的内容，您应该从库本身导入 GiftedChat，然后您可以使用那里的所有道具

例如

import {GiftedChat, InputToolbar} from 'react-native-gifted-chat';

 <GiftedChat
          renderInputToolbar={props => {
            return (
              <InputToolbar
                {...props}
                containerStyle={styles.chatWithoutBorder}
                renderComposer={() => <CustomComposer {...props} />}
                renderActions={() => {
                  return (
                        <CustomAction />
                      )
                  );
                }}
                renderSend={() => <CustomSend {...props} />}
              />
            );
          }}
        />

所有这些自定义组件实际上都是普通组件，您可以自己创建它，您只需要为它发送道具，对于消息框下方的页脚，您将需要这个 renderAccessory，如https://github 中所述。 com/FaridSafi/react-native-gifted-chat

推荐阅读