react-native - 在 native 组件之间共享变量的更好方法

Question

我正在使用 react-native 和 socket.io 创建一个应用程序。使用 io.connect(...) 连接到 socket.io 后，我需要使用套接字客户端保存一个变量，该变量可以在任何组件中使用。

但问题是:

1 - 我正在使用 react-navigation，所以我不能作为组件的属性传递，因为连接不是在导航器根目录中建立的，而是在子屏幕中建立的

2 - 我无法使用 this.props.navigation.navigate(route, {socketIo}) 作为导航参数传递，因为它是一个圆形对象，并且 react 中的 JSON.stringify-导航模块在尝试处理数据时抛出错误

3 - 我无法制作一个模块并将其导入到其他文件中，一旦它会生成多个连接

解决我的问题的解决方法是像这样设置一个全局变量:

global.socket = io.connect(...)

但是在谷歌搜索时我发现很多人说这不是一个好方法。有没有更好的方法来解决这个问题？

Answer 1

在 React Native 应用程序中共享变量和方法是一种特殊情况，因为您需要与私有(private)方法共享一个套接字连接以发出和接收事件，而不仅仅是共享变量。

在这种情况下，Redux 是不够的。我通过使用新的 StackNavigator 创建一个导航器容器来解决这个问题，处理此容器中的 socket 连接和事件，并通过 Redux 管理操作。例如:如果您需要在某个屏幕上发送事件，您可以使用 Redux 发送并监听 SocketContainer。然后执行IO操作。

此外，我创建了一个 Polyfill，因为 React Native 中的套接字实现有 userAgent错误。您可以在 this article 中阅读更多信息.

我的实现的完整例子可以是found here .