关键词：
【中文标题】如何使用渲染操作在 React-native-Gifted-chat 中发送图像/视频和语音消息？【英文标题】：How can I send images/video and voice messages in React-native-Gifted-chat using render actions? 【发布时间】：2020-11-28 13:06:16 【问题描述】：我想在使用 React-native-gifted-chat 和 Firebase 开发的聊天应用程序中发送图像/视频，我如何为他们创建操作并调用该操作以在 firebase 中上传并发送图像/视频？
这是我的代码。
handleSendImage = () =>
console.log("handleSendImage");
;
renderActions(props)
return (
<Actions
...props
// containerStyle=
// width: 70,
//
icon=() => (
<Icon
name="camera"
size=30
color=colors.btnBg
font="FontAwesome"
onPress=this.handleSendImage
/>
)
onSend=(args) => console.log(args)
/>
);
<GiftedChat
placeholder="Hey!"
alwaysShowSend
messages=messages
onSend=(newMessage) => this.onSend(this.chatID(), newMessage)
renderInputToolbar=this.renderInputToolbar
renderActions=this.renderActions
user=
_id: senderId,
name: senderName,
/>
如何点击特定动作并分别发送语音和图像/视频？
【问题讨论】：
你找到解决办法了吗？ 是的，@OliverD，能够使用 Actions 进行开发。 @JaydeepPithwa 你能在这里发布解决方案吗？ 尝试将您的操作添加到renderActions
【参考方案1】：
天才聊天本身具有 renderActions 属性，因此只需创建自定义操作即可上传图像/视频和语音。
在这里，我附上了用于上传 PDF/Doc 文件等文档的代码。
要上传图片/视频，您只需要更改该包，而不是我使用的文档选择器
const renderActions = (props) =>
return (
<Actions
...props
options=
['Document']: async (props) =>
try
const result = await DocumentPicker.pick(
type: [DocumentPicker.types.pdf],
);
console.log("image file",result)
catch (e)
if (DocumentPicker.isCancel(e))
console.log("User cancelled!")
else
throw e;
,
Cancel: (props) => console.log("Cancel")
onSend=args => console.log(args)
/>
)
;
天才聊天组件
<GiftedChat
messages=messages
showAvatarForEveryMessage=true
onSend=messages => onSend(messages)
renderActions=() => renderActions()
user=
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
renderCustomView=renderCustomView
/>
【讨论】：
如何在OpenGL中实现灰度渲染？
】如何在OpenGL中实现灰度渲染？【英文标题】：howtoimplementgrayscalerenderinginOpenGL?【发布时间】：2010-10-2610:37:18【问题描述】：在渲染带纹理的多边形场景时，我希望能够在原始颜色渲染和“灰度”模式之间切换。我一直在尝试使... 查看详情
如何在 Vue 2 渲染功能中使用插槽？
】如何在Vue2渲染功能中使用插槽？【英文标题】：HowtouseslotinVue2renderfunction?【发布时间】：2021-04-1603:29:35【问题描述】：我想执行以下操作，但使用Vue2的渲染功能<template><imported-component><templatev-slot:default="importedFunctio... 查看详情
django - 如何渲染我在网页中随处使用的模板？
】django-如何渲染我在网页中随处使用的模板？【英文标题】：django-HowcanIrenderatemplateIuseeverywhereinmywebpage?【发布时间】：2011-09-2216:42:21【问题描述】：我正在使用django1.2.4。我在registration/login.html中有一个登录模板（至尊操作是dja... 查看详情
如何根据用户的操作系统有条件地渲染 ReactJS 内容
】如何根据用户的操作系统有条件地渲染ReactJS内容【英文标题】：HowtoconditionallyrenderReactJScontentbasedofuser\'sOperationSystem【发布时间】：2018-08-0800:59:35【问题描述】：我正在寻找一种解决方案，以根据用户的操作系统有条件地呈现R... 查看详情
如何在将 React 与电子结合使用时分离渲染器和主进程依赖关系？
】如何在将React与电子结合使用时分离渲染器和主进程依赖关系？【英文标题】：HowtoseparaterendererandmainprocessdependencywhileusingReactwithelectron?【发布时间】：2021-12-2219:05:36【问题描述】：我有ReactWeb应用程序，我正在尝试将其作为桌... 查看详情
如何在没有 jsx 格式的情况下渲染反应组件？
】如何在没有jsx格式的情况下渲染反应组件？【英文标题】：HowIcanrenderreactcomponentswithoutjsxformat?【发布时间】：2016-07-1308:21:22【问题描述】：我尝试制作我的“智能”弹出组件，它可以在自身内部打开一些组件，但我的实现并不... 查看详情
在 win32 (C++) 中打开、操作和渲染 SVG 文件
...的形状并将这些形状渲染到windows(vista/7/...)的屏幕上。我使用C++构建器。我一直在考虑使用cairo或agg来渲染形状，但我需要一个SVG解析器库，它提供 查看详情
在 node.js 中使用 fabric.js 渲染和操作服务器端画布
】在node.js中使用fabric.js渲染和操作服务器端画布【英文标题】：Usingfabric.jstorenderandmanipulateserver-sidecanvasinnode.js【发布时间】：2012-12-0107:34:52【问题描述】：我正在尝试将fabric.js（v0.9.21，在ubuntu12.04上通过npm安装）与node.js一起在... 查看详情
如何在 Vue.js 插槽中使用条件渲染？
】如何在Vue.js插槽中使用条件渲染？【英文标题】：HowtouseconditionalrenderingwithVue.jsslots?【发布时间】：2020-11-1523:51:37【问题描述】：如何使用v-if的结果在Vue中渲染两个不同的组件？如果重要的话，我也在尝试使用v-for渲染TreeView... 查看详情
如何避免在渲染方法中使用 setState？
】如何避免在渲染方法中使用setState？【英文标题】：HowtoavoidusingsetStateinrendermethod?【发布时间】：2019-08-1402:57:42【问题描述】：我正在使用react-apollo通过<Query/>和<Mutation/>获取数据。因此，当我得到一些数据... 查看详情
如何在带有 HTML 渲染的 NestJs 中使用验证？
】如何在带有HTML渲染的NestJs中使用验证？【英文标题】：HowtousevalidationinNestJswithHTMLrendering?【发布时间】：2019-07-2807:39:54【问题描述】：NestJS使用验证管道和验证@UsePipes(ValidationPipe)如果失败，则会引发异常。这对于返回JSON的REST... 查看详情
如何在 React Native 中使用函数渲染组件
】如何在ReactNative中使用函数渲染组件【英文标题】：HowtorendercomponentsusingfunctioninReactNative【发布时间】：2018-12-2413:59:00【问题描述】：您好，我是Reactnative的新手，并通过在渲染中调用函数来尝试渲染组件，但它似乎不起作用。... 查看详情
如何在 onSubmit 时使用功能组件渲染页面？
】如何在onSubmit时使用功能组件渲染页面？【英文标题】：howdoIrenderapageinreactusingfunctionalcomponentswhenonSubmit?【发布时间】：2020-11-1820:38:32【问题描述】：functionHeader()const[search,setSearch]=useState(\'\');const[search_results,dispatch]=useStateV 查看详情
如何获取png图片某点像素的rgba值
参考技术A参数data指向绘图操作被渲染的内存区域，这个内存区域大小应该为（bytesPerRow*height）个字节。如果对绘制操作被渲染的内存区域并无特别的要求，那么可以传递NULL给参数date。参数width代表被渲染内存区域的宽度。参数... 查看详情
如何使用数据表在渲染函数中使用列名
】如何使用数据表在渲染函数中使用列名【英文标题】：Howtousecolumnnameinrenderfunctionusingdatatables【发布时间】：2021-10-0608:37:09【问题描述】：我有一个我认为很容易回答的问题，但我在论坛上找不到如何解决..以下代码用于在选中... 查看详情
如何使用 Vue.js 在变量中渲染模板？
】如何使用Vue.js在变量中渲染模板？【英文标题】：HowcanIrendertemplateinavariablewithVue.js?【发布时间】：2016-06-0603:38:16【问题描述】：在mustache.js中，templatescanbepassedasanargumentofMustache.render()asfollows:varview=title:"Joe",calc:function()return2+ 查看详情
如何在渲染之前使用 jQuery 隐藏元素？
】如何在渲染之前使用jQuery隐藏元素？【英文标题】：HowtohideelementswithjQuerybeforetheygetrendered?【发布时间】：2011-02-1713:34:31【问题描述】：我想生成带有可以有条件地显示/隐藏的区域（div、spans）的html布局。这些区域默认是隐藏... 查看详情
如何在 Xcode 6 Interface Builder 中使用模板渲染模式？
】如何在Xcode6InterfaceBuilder中使用模板渲染模式？【英文标题】：HowtousetemplaterenderingmodeinXcode6InterfaceBuilder?【发布时间】：2014-09-2314:41:31【问题描述】：我正在尝试使用在InterfaceBuilder中启用了模板渲染模式的图像，但我无法让它... 查看详情