Question

我正在尝试使用nodejs express服务器开发一个基本的套接字IO聊天应用程序，并对本机做出反应。我是这些堆栈的新手，所以无法确定组件的正常功能。我遵循了官方套接字IO文档提供的约定，但是找不到与react native特别相关的任何内容。我还尝试了Web的相同功能，即react js以及它的一些工作原理，但无法实现react native的结果。

这是我来自主要客户端组件的代码：

    constructor(props) {
      super(props);
          this.state = {
          text: '',
          messages : [],
       }
    }
    componentDidMount() {
        this.socket = io('http://localhost:3333');
        this.socket.on('RECEIVE_MSG', (msg) => this.addMessage(msg))
    }
    sendMessage = () => {
        this.socket.emit('EMIT_MSG', {
            text: this.state.text
        });

        this.setState({text: ''})
    }

    addMessage = (msg) => {
        console.log(msg, 'any incoming msgs data');
        this.setState({messages : [...this.state.messages, msg]});
        console.log(this.state.messages);
    }

    renderMessages = () => {
        return this.state.messages.map((message, index) => {
            return (
                <Text key={index}>
                    {message}
                </Text>
            )
        })
    }

  render() {
    return (
      <View>
        <TextInput    placeholder="enter your msg"
          onChangeText={(text)=>this.setState({text})}/>

          <TouchableOpacity onPress={() => this.sendMessage}>
            <Text> send msg </Text>
           </TouchableOpacity>

            <ScrollView>
                {this.renderMessages()}
            </ScrollView>
      </View>
    )
  }
}

这是我的服务器代码，用于Express和服务器导入：

 io.on('connection', function(socket) {
    console.log('a user connected: ' +   socket.id);


    socket.on('RECEIVE_MSG', function(msg){
        console.log('message: ' + msg);

        io.emit('EMIT_MSG', msg);

    });
});

问题仍然存在，控制台中什么都没有显示。每当我按下发送按钮时，文本甚至都不会更改，也不会在控制台中显示任何错误消息。如果我没有遵循正确的约定，请帮助我修复它吗？

Answer 1

您的问题出在

for x in range(0,9):
    class.function()

那里的箭头功能不会调用this.sendMessage。将您的代码更改为

<TouchableOpacity onPress={() => this.sendMessage}>

您应该会看到结果。

您还错误地使用了滚动视图，而不仅仅是父视图。为了渲染项目，您必须设置正确的props。其中包括<TouchableOpacity onPress={this.sendMessage}>道具，该道具需要一个函数来显示数据，而renderItem函数，则需要一个函数为React提供一个不可见的键值，以确保呈现的项目是唯一的。

反应本地实时聊天

1 个答案: