将套接字传递给组件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将套接字传递给组件相关的知识,希望对你有一定的参考价值。

这是React Native 0.59 app的App.js

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import GLOBAL from "../../lib/global";

//socket.io
const socket = io(GLOBAL.BASE_URL, {
  transports: ['websocket'],
  jsonp: false
});

//create the navigator
const navigator = createStackNavigator(
  {
    Event:  Event,
    Chat: {
      screen: Chat,

    } 
  }, {
    initialRouteName: "Event"
  }
);

//export it as the root component
export default createAppContainer(navigator);  

socket需要传递到Chat组件。由于只有使用socket的Chat组件,我想将socket作为道具而不是使用context,它在许多组件之间共享数据。理想情况下,socket可以像createStackNavigator一样传递:

const navigator = createStackNavigator(
      {
        Event:  Event,
        Chat: {
          screen: Chat, params: {socket: this.socket}            
        } 
      }, {
        initialRouteName: "Event"
      }
    );

如何用React Native 0.59做到这一点?

答案

我能想到的最简单的方法是创建一个新的组件,它将Chat组件和套接字作为prop返回。

import React, {Component} from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Event from './src/components/event/Event.js';
import Chat from './src/components/chat/Chat.js';
import GLOBAL from "../../lib/global";

//socket.io
const socket = io(GLOBAL.BASE_URL, {
  transports: ['websocket'],
  jsonp: false
});

const ChatWithSocket = () => (<Chat socket={socket} />)

//create the navigator
const navigator = createStackNavigator(
  {
    Event:  Event,
    Chat: {
      screen: ChatWithSocket,

    } 
  }, {
    initialRouteName: "Event"
  }
);

//export it as the root component
export default createAppContainer(navigator); 

以上是关于将套接字传递给组件的主要内容,如果未能解决你的问题,请参考以下文章

将变量传递给现代中继中的片段容器

通过道具 React 将 WS 连接传递给孩子

如何将 websocket 实例传递给 vue.js 组件,然后在其上调用 send()?

将状态传递给 React/Redux 中的递归嵌套组件

如何将套接字传递给节点中的集群

Android:将片段和弹出窗口的点击事件中生成的变量传递给活动的方法