如何解决React Native:功能组件到类组件
我正在使用React Native Gifted Code。
这是下面提供的我的代码段:
constructor(props) {
super(props);
this.state = {
message: [{
_id: 1,text: 'Hello developer',createdAt: new Date(),user: {
_id: 2,name: 'React Native',avatar: 'https://placeimg.com/140/140/any',},}],}
}
componentDidMount() { }
onSend(messageSend = []) {
this.setState(
previousMessages => ({
message: GiftedChat.append(previousMessages,messageSend)
})
);
}
render() {
const chat = <GiftedChat
messages={this.state.message}
onSend={(messageSend) => this.onSend(messageSend)}
user={{
_id: 1,}}
/>;
if (Platform.OS === 'android') {
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behaviour="padding"
keyboardVerticalOffset={30}
enabled
>
{chat}
</KeyboardAvoidingView>
);
}
}
但是,在转换为类组件之后,我并没有获得理想的结果。 (something similar to this)
问题是,发送新邮件时,它会“替换”发件人的 消息和我的最新消息。
解决方法
这是基于您的代码的类组件的完整代码
import React from 'react';
import {KeyboardAvoidingView,Platform} from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
message: [{
_id: 1,text: 'Hello developer',createdAt: new Date(),user: {
_id: 2,name: 'React Native',avatar: 'https://placeimg.com/140/140/any',},}],}
}
//send message will no longer overlap/replace 'hello developer'
onSend(messageSend = []) {
this.setState(
previousMessages => ({
message: GiftedChat.append(previousMessages.messsage,messageSend)
})
);
}
render() {
const chat = <GiftedChat
messages={this.state.message}
onSend={(messageSend) => this.onSend(messageSend)}
user={{
_id: 1,}}
/>;
if (Platform.OS === 'android') {
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behaviour="padding"
keyboardVerticalOffset={30}
enabled
>
{chat}
</KeyboardAvoidingView>
);
} else {
return chat
}
}
}
您也可以在expo
中检查样本上述代码的输出:
,显然,我不得不添加previousMessages.messsage
而不是previousMessages
。
解决方案:
//send message will no longer overlap/replace 'hello developer'
onSend(messageSend = []) {
this.setState(
previousMessages => ({
message: GiftedChat.append(previousMessages.messsage,messageSend)
})
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。