Блог

Вот приложение App.js React Native 0.59.

 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 , я хотел бы передать socket в качестве реквизита вместо использования context , который разделяет данные между многими компонентами. В идеале socket можно передать следующим createStackNavigator образом:

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

Как это сделать с React Native 0.59 помощью?

Самый простой способ, который я могу придумать, — создать новый компонент, который возвращает компонент чата и сокет в качестве опоры.

Пример

 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);