javascript - 如何使用 renderMessage、renderMessageImage 函数以及消息对象为空时如何显示未找到的消息
问题描述
我正在我的应用程序中集成 react-native-gifted-chat。
我的天才聊天代码是
<GiftedChat
composerHeight={COMPOSER_HEIGHT}
minInputToolbarHeight={COMPOSER_HEIGHT}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{ _id: this.state.senderUserName }}
loadEarlier={this.state.loadEarlier}
isLoadingEarlier={this.state.isLoadingEarlier}
onLoadEarlier={this.onLoadEarlier}
placeholder="Type your message"
renderSend={this.renderSend}
alwaysShowSend={true}
renderActions={this.imageSend.bind(this)}
renderInputToolbar={this.renderInputToolbar}
renderBubble={this.renderBubble.bind(this)}
renderMessage={this.renderMessage.bind(this)}
renderMessageImage={this.renderMessageImage}
renderAvatar={null}
inverted={true}
/>
在这里我需要使用自定义图像渲染器。我知道我需要使用 renderMessageImage 但我无法找到合适的例子来实现它。
My RenderMessageImage is
renderMessage(props) {
if(this.state.messages.length !==0){
return <Message {...props}
/>;
}else{
return <View style={{flex:1, backgroundColor:'red'}}>
<Text>Hello no data found</Text>
</View>
}
return null
}
但它不工作。
我的另一个问题是,如果没有任何消息,我需要将天才聊天屏幕显示为没有找到消息而不是白屏。我怎样才能实现这两个。
我需要类似的屏幕
解决方案
您可以尝试flex:1
从您的样式中删除可能是一个解决方案。
编辑
使用系统消息,如果 . 将其包含在您的消息列表中messages.length === 0
。
编辑 2
你必须创建一个覆盖,在这里看我的例子: https ://snack.expo.io/@xcarpentier/gifted-chat
render() {
return (
<>
{this.state.messages.length === 0 && (
<View style={[
StyleSheet.absoluteFill,
{
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
bottom: 50
}]}>
<Image
source={{ uri: 'https://i.stack.imgur.com/qLdPt.png' }}
style={{
...StyleSheet.absoluteFillObject,
resizeMode: 'contain'
}}
/>
</View>
)}
<GiftedChat
messages={this.state.messages}
onSend={(messages) => this.onSend(messages)}
renderCustomView={this.renderCustomView}
user={{
_id: 1,
}}
parsePatterns={linkStyle => [
{
pattern: /#(\w+)/,
style: { ...linkStyle, color: 'lightgreen' },
onPress: props => alert(`press on ${props}`),
},
]}
/>
</>
);
}
推荐阅读
- amazon-web-services - Spring Batch 和 S3 集成 - 如何在开始阅读之前先从 S3 中删除空字符?
- batch-file - 多文件重命名器
- python - 如何从 Python 脚本中部署 Azure 函数
- botframework - Microsoft Teams Bot 自适应卡未在移动应用程序 (android) 中呈现
- java - 如何关闭浏览器选项卡?
- c# - 系统图标 - Windows 10 风格
- mysql - 在 MYSQL 中运行 IF ELSE STATEMENT 以运行不同的查询
- node.js - Node.js:在 consul kv get 中传递令牌
- python - python中的opencv未检测到第二个摄像头
- php - 不能使用“对象”作为类名,因为它是保留的 - 修复此代码