美文网首页ReactNative
react-native-gifted-chat 实践指南

react-native-gifted-chat 实践指南

作者: 陈友辉 | 来源:发表于2018-01-01 10:36 被阅读594次
  • messages(Array) - 消息数组,用于展示消息 有特定的格式
{
  _id: 1, //消息的ID,用于标示,必须唯一
  text: 'My message', //发送的消息
  createdAt: new Date(), //发送的时间
  user: {
    _id: 2, //发送方的ID 如果是自己的ID 则在右边,否则在左边
    name: 'React Native', //发送方的昵称
    avatar: 'https://facebook.github.io/react/img/logo_og.png', //发送方的头像
  },
  image: 'https://facebook.github.io/react/img/logo_og.png',
  //添加你所需要扩展的键值对
}
{
   _id: 1,
   text: 'This is a system message',
   createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
   system: true,
  //添加你所需要扩展的键值对
}
  • text(String) - 输入框的默认值;默认是undefined

  • placeholder(String) - 输入框的占位字符

  • messageIdGenerator(Function) - 为你的新消息自动生成一个id. 默认是用 UUID v4, 由uuid库实现 点击传送门去查看这个库 - uuid

  • user(Object) - 配置用户信息

{
   _id: 1, //发送消息需要和配置的id一致
   avatar, //头像 若不设置则不显示
   name, //昵称
}
  • onSend(Function) - 点击send时的回调

  • locale(String) -本地化日期

  • timeFormat(String) - 格式化时间,默认是本地时间,即当前时区的时间

  • dateFormat(String) - 日期格式化

  • isAnimated(Bool) - 键盘出现时,是否有动画

  • loadEarlier(Bool) - 是否显示加载更早的消息按钮 "Load earlier messages"

  • onLoadEarlier(Function) - 加载更多消息时的回调

  • isLoadingEarlier(Bool) - 点击加载更早的消息时是否出现转菊花的图标

  • renderLoading(Function) - 加载页面未加载出来时的页面

  • renderLoadEarlier(Function) - 配置 "Load earlier messages" 加载更早消息的按钮

  • renderAvatar(Function) - 配置头像,如果设置'null'则头像都不显示

  • showUserAvatar(Bool) - 是否展示自己的头像,默认时false 只展示别人的头像

  • onPressAvatar(Function(user)) - 点击头像时的回调

  • renderAvatarOnTop(Bool) 头像显示在顶部还是底部,默认是底部

    这是在底部
这是在顶部
  • renderBubble(Function) - 自定义气泡
_renderBubble(props) {
        return (
          <Bubble
            {...props}
            wrapperStyle={{
              left: { //对方的气泡
                backgroundColor: '#F5F7F7',
              },
              right:{ //我方的气泡
                backgroundColor:'#FDF099'
              }
            }}
          />
        );
      }
  • renderSystemMessage(Function) - 自定义系统消息

  • onLongPress(Function(context,message)) - 长按消息气泡时的回调,详细可以看github的演示 showActionSheetWithOptions()

  • inverted(Bool) - 反转消息的显示顺序,默认是true 即消息显示的顺序是否和你message数组的顺序相同

  • renderMessage(Function) - 自定义消息的内容View

  • renderMessageText(Function) - 自定义消息的文本

  • renderMessageImage(Function) - 自定义图片消息

  • imageProps(Object) - 额外的属性要传递给默认创建的组件rendermessageimage 点去去查看文档

  • lightboxProps(Object) - 额外的属性传递给Modal框(体现在点击图片的Modal)
    点击查看第三方 - Lightbox

  • renderCustomView(Function) - 在气泡内创建一个自己自定义的视图,即创建自定义的消息

  • renderDay(Function) - 自定义消息上方的日期

  • renderTime(Function) - 自定义消息中的时间

  • renderFooter(Function) - 自定义listView的底部, 例如.'User is typing...'; 点击查看示例 example/App.js

    for an example

  • renderChatFooter(Function) - 自定义组件的渲染下messagecontainer(从ListView分开)

  • renderInputToolbar(Function) - 自定义你的底部工具栏

  • renderComposer(Function) - 自定义textInput输入框

  • renderActions(Function) - 自定义输入框左边的按钮

  • renderSend(Function) -自定义发送按钮;您可以很容易地将子组件传递给原始组件,例如使用自定义图标。

  • renderAccessory(Function) - 在消息编辑器下面的自定义第二行操作

  • onPressActionButton\(Function) - 当点击输入框左边的按钮时的回调 (如果设置了 actionSheet将不会执行)

  • bottomOffset(Integer) - 从屏幕底部的聊天距离(如显示选项卡栏,则非常有用)

  • minInputToolbarHeight(Integer) - 工具栏的最小高度,默认是44

  • listViewProps(Object) - 列表的属性,用于扩展你的列表

  • textInputProps(Object) - 输入框的属性,用于扩展你的输入框

  • keyboardShouldPersistTaps(Enum) - 确定键盘在敲击后是否应该保持可见。一个枚举; 详情见 <ScrollView>

  • onInputTextChanged(Function) - 输入框编辑时的回调

  • maxInputLength(Integer) - 输入框输入的最多字符数

以上,会继续修改添加中 欢迎指证。

相关文章

网友评论

  • 未来_65d8:怎么清除这些记录数组
    陈友辉:@未来_65d8 数组置空就行
  • c0956e125560:可以完整输入中文吗?我现在用它有输入中文的bug,第一个单词不能输入
  • 大象飞:服务端返回的字段和控件需要的字段不一样 怎么办
    陈友辉:自己重新创建一个数组,内容弄成控件需要的字段
  • b00633bac37b:能分享下代码吗
    b00633bac37b:@陈友辉 没事 谢谢你
    陈友辉:抱歉,代码在项目里,暂时不能分享的
  • 代码界的扫地僧:自己发送的消息 头像怎么出不来呀
    陈友辉:抱歉,没注意看回复,出得来呀,你可能是设置来自己的头像不显示
  • 代码界的扫地僧:有语音功能吗
    a140fd475cfb:@陈友辉 请问使用这个组件怎么发送手机相册里的图片呢?
    陈友辉:没有,只能发送图片及文字
  • 代码界的扫地僧:Bubble 这个用的是什么组件呢 可以告诉下吗 嘿嘿
    陈友辉:Bubble用的是自定义的一个组件,在源码中可以看到

本文标题:react-native-gifted-chat 实践指南

本文链接:https://www.haomeiwen.com/subject/qpxggxtx.html