reactjs - 如何在气泡天才聊天附近添加按钮？

Question

我一直在使用GitedChat库，我想在右侧“回复”的气泡旁边添加一个按钮。我该怎么做？

示例图像

泡泡.JS

import React from 'react';
import {Bubble} from 'react-native-gifted-chat';

export const renderBubble = props => {
  return (
    <Bubble
      {...props}
      wrapperStyle={{
        left: {
          backgroundColor: '#FFFFFF',
          display: 'flex',
          flexDirection: 'row',
          borderBottomLeftRadius: 0,
        },
        right: {
          backgroundColor: '#1D4ED8',
          left: 0,
          marginBottom: 15,
          borderBottomRightRadius: 0,
        },
      }}
      tickStyle={{color: 'red'}}
    />
  );
};

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

Answer 1

就在右侧renderBubble创建Image

renderBubble(props) {
return (
  <View
    style={{ flex: 1, flexDirection: 'row'}}>
    <Bubble
      {...props}
    />
    <Image
      style={{
        width: 30,
        height: 30,
        marginTop: 'auto',
        bottom: 0,
      }}
      source={{
        uri:
          'https://icons-for-free.com/iconfiles/png/512/next+reply+icon-1320165657413388724.png',
      }}
    />
  </View>
);}