react-native-gifted-chat - 如何更改默认操作按钮的颜色/图标

Question

是否可以更改图标或至少更改默认操作按钮的颜色/样式？

我没有在源代码中找到任何可用的东西。我正在使用以下代码，它显示默认操作按钮：

   onPressActionButton={this.handleActionButtonPress}

我想更改左下角的圆圈+按钮。

标签： react-native-gifted-chat

Answer 1

在里面定义自定义动作按钮：

<GiftedChat
   ...
   renderActions={messages => this.micBtn(messages)}
   ...
/>

然后定义自定义按钮的外观：

micBtn = (sendProps) => {
      return (
        <View flexDirection='row' onTouchStart={messages => this.micBtnPressed(sendProps.messages)}>
        <TouchableOpacity style={styles.myStyle} activeOpacity={0.5}>
        <Image
          source={{
            uri:
              'https://img.icons8.com/material-rounded/50/000000/microphone.png',
          }}
          style={styles.MicIconStyle}
        />
      </TouchableOpacity>
      </View>
      );
    }
  }
micBtnPressed(messages=[]){
    //do something useful here
    console.log("Current Inputbox content: ",messages)
  }

最后，定义样式，例如：

myStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    //backgroundColor: '#485a96',
    borderWidth: 0.5,
    borderColor: '#fff',
    height: 40,
    width: 35,
    borderRadius: 5,
    margin: 5,
  },
  MicIconStyle: {
    padding: 5,
    marginRight: 10,
    height: 35,
    width: 35,
    resizeMode: 'contain',
  },

最后的评论，我相信通过定义自定义操作按钮，您也放弃（覆盖） onPressActionButton={this.handleActionButtonPress} 指令，该指令仅在您使用默认的未自定义按钮时有效。因此，这就是我从自定义对象内部调用操作方法“micBtnPressed”的原因。