带有按钮的自定义工具栏 Gifted Chat

Question

我使用了库'GiftedChat'。我想用这个 - InputToolBar 做聊天的底部，在容器下面有 5 个按钮，其中一个是按钮发送消息

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

Answer 1

如果我没理解错的话，你想知道如何组织这段代码

首先，您根本不需要 <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

中所述

带有按钮的自定义工具栏 Gifted Chat

Custom tolbar with buttons GiftedChat

reactjs

react-native

chat

react-native-gifted-chat