javascript - 在 React Native 中通过 Navigator 传递套接字

Question

我不断收到 undefined 不是对象(正在评估 this.props.socket.on)。我在我的 index.ios.js 文件中声明我的套接字，如下所示:

class Main extends Component {
   constructor(props) {
      super(props);

      this.state = {
        message: ''
      };
      this.socket = io('http://localhost:8000', {jsonp: false})
 }

然后，在我的 renderScene(route, navigator) 导航方法中，我有:

renderScene(route, navigator) {
   if (route.id == 'EnterName') {
     return <EnterName socket={this.socket} navigator={navigator} />
   }
}

render() {
  return (
    <Navigator
       initialRoute={{id: 'EnterName', index: 0}}
      renderScene={ this.renderScene } />
  );
}

但此套接字信息未正确传递到 EnterName。当我尝试时出现上述错误:

this.props.socket.on('chat message', (msg) => {
   this.state.messages.push(msg);
   this.forceUpdate();
});`

你知道为什么没有正确初始化/传递套接字吗？

Answer 1

检查一下。

顺便说一句，这是 gr3x。

如果你在 renderScene 的开始处扔一个 debugger 并且你检查 this 你会发现你在不同的范围内， Navigator 的范围，并且您无权访问存在于 Main 中的 this.socket 因此您正在传递 undefined 到 EnterName 作为 socket 属性，以及为什么在从 EnterName

访问它时收到这些错误

相反，将 this.socket 添加到 initialRoute 对象，并通过 route 在 renderScene 中访问它像这样

renderScene(route, navigator) {
    if (route.id == 'EnterName') {
     return <EnterName socket={route.socket} navigator={navigator} />
    }
}

render() {
  return (
    <Navigator
       initialRoute={{id: 'EnterName', index: 0, socket: this.socket}}
       renderScene={ this.renderScene } />
  );
}

这应该可以解决您的问题。如果我能提供进一步的帮助，请在 reddit 上告诉我!