Question

我遇到了wix的react-native-navigation问题。每当我使用他们的任何方法来推送/弹出屏幕并在passProps对象（在我的情况下为socket.io对象）中传递数据时，新屏幕就会出现问题，无法通过{{1来监听socket.io事件}}。它可以发出很好的事件，但不能听这些事件。

如果我有条件地在第一个屏幕中渲染新的屏幕组件，并将套接字对象作为prop传递，则不会发生这种情况。（不使用react-native-navigation）

我尝试使用不同的rect-native-navigation方法（popTo，push，pop，showModal，showOverlay），这些方法都无法维持在第二页上执行socket.io事件侦听器的能力。

不使用react-native-navigation ，并在第一页上有条件地呈现第二页，从而允许下一个屏幕组件同时显示socket.on(*event*, *callback*)和.emit(*event*)

服务器：

.on(*event*, *callback*)

TestScreen1：

io.on('connection', socket => {
    socket.on("test", () => {
        console.log("test emission received");
        socket.emit("test");
    });
});

TestScreen2：

import React from "react";
import { View, Text } from "react-native";
import { Navigation } from "react-native-navigation";
const socket = io("http://172.31.99.250:3000");

export default class TestScreen1 extends React.Component {

  constructor(props) {
    super(props);
  }
  componentDidMount() {
    socket.on('test', () => {
      alert('event heard');
    });
    // if the event listener is here, its heard and executed...
  }
  testFunc = () => {
    Navigation.push(this.props.componentId, {
      component: {
        name: "TestScreen2",
        passProps: {
          socket: socket
        }
      }
    });
  };
render() {
    return (
      <View>
        <TouchableOpacity onPress={this.testFunc}/>
          <Text>Test Button</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
}

Screen1内部的条件渲染：

import React from "react";
import { View, Text } from "react-native";
import { Navigation } from "react-native-navigation";

export default class TestScreen2 extends React.Component {
  static options(passProps) {
    return {
      topBar: {
        title: {
          fontFamily: "BungeeInline-Regular",
          color: "#333"
        }
      }
    };
  }
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    Navigation.events().bindComponent(this);
    this.props.socket.on("test", () => {
      alert("test listener active");
    });
    this.props.socket.emit("test");
  }

  render() {
    return (
      <View>
        <Text>You're on the test screen</Text>
      </View>
    );
  }
}

wix及其使用passProps的Navigation方法发生了什么？因为不使用导航时不会发生这种情况？

如何使用wix的react-native-navigation将socket.io对象传递到下一个屏幕

0 个答案: