带有按钮的自定义工具栏 天才聊天

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 中所述。