React native 在RN天才聊天中显示为空白的图像
我的聊天应用程序使用RN 0.59.9和React native 在RN天才聊天中显示为空白的图像,react-native,react-native-gifted-chat,React Native,React Native Gifted Chat,我的聊天应用程序使用RN 0.59.9和react native gifted chat(0.9.6)。消息数据对象如下所示: let r = { _id: msg.id, text: msg.data.msg_body, image: msg.data.image, video: msg.data.video, createdAt : msg.createdAt, user:
react native gifted chat
(0.9.6)。消息数据对象如下所示:
let r = {
_id: msg.id,
text: msg.data.msg_body,
image: msg.data.image,
video: msg.data.video,
createdAt : msg.createdAt,
user: {
_id: msg.sender_id,
name: msg.user_name,
avatar: msg.user_avatar,
}
};
在文本、图像和视频
中,每条消息只有一个字段填写了数据,另外两个字段为空或未定义。以下是db中消息数据的示例:
以下是最后2个图像消息输出:
06-29 15:10:21.732 14652 14927 I ReactNativeJS: 'Messages : ', [ { _id: 131,
06-29 15:10:21.732 14652 14927 I ReactNativeJS: text: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS: image: './20160906_114858_HDR.jpg',
06-29 15:10:21.732 14652 14927 I ReactNativeJS: video: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS: createdAt: '2019-06-16T04:29:04.902Z',
06-29 15:10:21.732 14652 14927 I ReactNativeJS: user: { _id: 22, name: 'jc', avatar: undefined } },
06-29 15:10:21.732 14652 14927 I ReactNativeJS: { _id: 130,
06-29 15:10:21.732 14652 14927 I ReactNativeJS: text: '',
06-29 15:10:21.732 14652 14927 I ReactNativeJS: image: 'https://www.pexels.com/photo/nature-red-love-romantic-67636/',
06-29 15:10:21.732 14652 14927 I ReactNativeJS: video: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS: createdAt: '2019-06-16T04:23:36.663Z',
06-29 15:10:21.732 14652 14927 I ReactNativeJS: user: { _id: 22, name: 'jc', avatar: undefined } },
一个图像指向URL,另一个是本地文件。但这两张图片都没有显示:
渲染代码很简单:
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={messages => this._onSend(messages)}
//renderMessageImage={() => this.showImage}
user={{_id: this.props.navigation.state.params.user.id,
name: this.props.navigation.state.params.user.name,
avatar: this.props.navigation.state.params.user.user_data.avatar}}
/>
);
}
render(){
返回(
这个。_onSend(消息)}
//renderMessageImage={()=>this.showImage}
user={{u id:this.props.navigation.state.params.user.id,
名称:this.props.navigation.state.params.user.name,
化身:this.props.navigation.state.params.user.user\u data.avatar}
/>
);
}
测试并加载图像URL链接,本地文件为3MB图像。什么会导致图像不显示?您试图加载的远程图像URL似乎指向网页,而不是实际图像 图像url应为: 消息对象看起来像:
{
_id: 130,
text: '',
image: 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
video: undefined,
createdAt: '2019-06-16T04:23:36.663Z',
user: {
_id: 22,
name: 'jc',
avatar: undefined
}
}
对于另一个(本地)图像,请确保它与.js文件位于同一目录中(包含render方法,因为您使用的是“/”相对路径)