有天赋的聊天 renderAction 道具不会调用函数答案

【问题标题】：gifted-chat renderAction prop won't call a function有天赋的聊天 renderAction 道具不会调用函数
【发布时间】：2021-10-19 15:44:12
【问题描述】：

我正在尝试使用天才聊天中的 renderAction 道具制作自定义菜单以共享图片和位置。我无法让它调用函数。 renderActions={console.log('hello')} 按预期输出，由于某些原因没有调用函数。

我查看了代码示例，但找不到任何我遗漏的东西 - 但显然我遗漏了一些东西。

这是代码。如果有任何额外的信息会有所帮助，请告诉我，我会添加它。仍然是新的堆栈。

renderActions > console.log() 没有被调用

     renderActions() {
    console.log('renderActions called');
 }

renderAction={console.log()} 被调用。 renderActions={this.renderActions} 不会被调用。我试过以我能想到的各种方式传递它： {() = > this.renderActions()}, {this.renderActions.bind(this)}, {this.renderActions} ...似乎没有任何效果。

render() {
let bgColor = this.props.route.params.bgColor;
return (
  <View style={[styles.bodyContent]}>
    <GiftedChat
      renderBubble={this.renderBubble.bind(this)}
      renderSystemMessage={this.renderSystemMessage.bind(this)}
      renderInputToolbar={this.renderInputToolbar.bind(this)}
      renderActions={() => this.renderActions()}
      messages={this.state.messages}
      onSend={(messages) => this.addMessage(messages)}
      user={{
        _id: this.state.uid,
      }}
    />
    {Platform.OS === 'android' ? (
      <KeyboardAvoidingView behavior="height" />
    ) : null}
  </View>
);

}

任何帮助将不胜感激。我确定我遗漏了一些明显的东西，但我完全被难住了。谢谢！

【问题讨论】：

标签： react-native react-native-gifted-chat

【解决方案1】：

渲染操作不应该在控制台日志中，如果你看到它返回的内容，你会看到它返回 JSX

import {GiftedChat, InputToolbar} from 'react-native-gifted-chat';

 // custom action 
 const customAction = () => {
     return(
       <View>
         <Text>Custom Action</Text>
      </View>
      );
 }

 <GiftedChat
          renderInputToolbar={props => {
            return (
              <InputToolbar
                {...props}
                containerStyle={styles.chatWithoutBorder}
                renderComposer={() => <CustomComposer {...props} />}
                renderActions={ <CustomAction /> }
                renderSend={() => <CustomSend {...props} />}
              />
            );
          }}
        />

所有这些自定义组件实际上都是普通组件，你可以自己创建它，你只需要为它发送道具对于消息框下方的页脚，您将需要此 renderAccessory，如https://github.com/FaridSafi/react-native-gifted-chat 中所述。

【讨论】：

它对我有用，谢谢兄弟
感谢您的反馈。明天我会试一试。在我尝试 console.log 之前，我使用 this.renderActions 返回这是一个单独的组件（并且被导入），但该组件不会呈现。控制台日志记录是我解决问题的尝试。

【解决方案2】：

感谢我的导师，我有答案了！

renderInputToolbar={} 属性会覆盖 renderActions={}。我最终没有在<GiftedChat /> 组件中使用renderActions 道具。而是将其作为道具传递给<InputToolbar />。

代码如下：

` <GiftedChat
      renderBubble={this.renderBubble.bind(this)}
      renderSystemMessage={this.renderSystemMessage.bind(this)}
      renderInputToolbar={this.renderInputToolbar.bind(this)}
      //renderActions={this.renderActions.bind(this)}
      messages={this.state.messages}
      onSend={(messages) => this.addMessage(messages)}
      user={{
        _id: this.state.uid,
      }}
    />`

然后是renderInputToolbar方法：

renderInputToolbar() {
     if (this.state.onlineStatus == false) {
        } else {
          return <InputToolbar renderActions={this.renderActions} />;
        }
      }

【讨论】：