react-native-gifted-chat 实践指南

2018-01-01 本文已影响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) - 输入框输入的最多字符数

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

react-native-gifted-chat 实践指南

猜你喜欢

热点阅读