Question

这是React Native 0.59应用程序的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，因此我想将socket用作道具，而不要使用在许多组件之间共享数据的context。理想情况下，可以像这样在socket中传递createStackNavigator：

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

如何使用React Native 0.59来做到这一点？

Answer 1

我能想到的最简单的方法是创建一个新的组件，该组件返回Chat组件和套接字作为道具。

示例

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

将套接字传递到组件中

1 个答案: