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

Question

我不断收到 undefined is not an object (evaluating 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();
});`

您知道为什么套接字 initialized/passed 不正确吗？

Answer 1

我认为这是一个上下文问题。您应该使用 es6 fat arrow 指定渲染方法：

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

Answer 2

看看这个。

这是 gr3x 顺便说一句。

如果您在 renderScene 的开头使用 debugger 并检查 this你会看到你在不同的范围内，即 Navigator 的范围，并且你无权访问 this.socket存在于 Main 中，因此您将 undefined 传递给 EnterName 作为 socket prop 以及从 EnterName

访问它时收到这些错误的原因

相反，将 this.socket 添加到 initialRoute 对象，并在 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 上告诉我！

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

Passing Sockets Through Navigator in React Native

javascript

sockets

components

reactjs

react-native