React Native：功能组件到 Class 组件

Question

我正在尝试将以下示例转换为 class 组件：

下面是我的代码片段：

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>
        );
    }
}

但是，在转换为 class 组件后，我并没有得到想要的结果。 (something similar to this)

The issue is when sending a new message, it's 'replacing' the sender's message with my latest message.

Answer 1

这是基于您的代码的 class 组件的完整代码

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

中的示例

以上代码的输出：

Answer 2

显然我必须添加 previousMessages.messsage 而不是 previousMessages。

解决方案：

//send message will no longer overlap/replace 'hello developer'
        onSend(messageSend = []) {
        this.setState(
            previousMessages => ({
                message: GiftedChat.append(previousMessages.messsage, messageSend)
            })
        );
    }

React Native：功能组件到 Class 组件

React Native: Functional Component to Class Component

javascript

react-native

react-functional-component

react-native-gifted-chat

react-class-based-component