react-native - react 导航 : Share state between two screens within TabNavigator

Question

我正在通过构建一个简单的聊天应用程序来学习 React Native。我有两个屏幕包裹在 TabNavigator 中，其中第一个屏幕(屏幕 A)是聊天框，另一个屏幕(屏幕 B)显示在线用户列表。我正在使用 SocketIO 来获取这些用户。

问题是，如何从 ScreenA 到 ScreenB 访问“onlineUsers”状态，以便在收到“用户加入”事件时可以看到更新的在线用户列表？

屏幕 A:

export default class ScreenA extends Component {
  constructor(props) {
    super(props);

    this.state = {
      onlineUsers = [];
    }
  }

  componentDidMount() {
    // Update list of online users when new user joins chat
    this.socket.on('user joins', (payload) => {
      this.setState({
        onlineUsers: payload.users
      })
    })
  }
}

屏幕B:

export default class ScreenB extends Component {
  constructor(props) {
    super(props);

    // I want to get the onlineUsers from ScreenA
    this.state = {
      onlineUsers = [];
    }
  }
}

路由器:

export const Chat = TabNavigator({
  ChatBox: {
   screen: ScreenA
  },
  OnlineUsers: {
   screen: ScreenB
  },
})

PS:我正在使用 react-navigation 来处理导航

Answer 1

最好的方法是在父组件中处理事件，然后将其传递给它们的子组件。因此，在您的情况下，您的路由器中应该有一个在线用户列表。然后将数组传递给屏幕 B。这是你应该怎么做

路由器

state = {
    online_users:[]
}

_update = (data) => {
    this.setState({online_users:data});
};

export const Chat = TabNavigator({
   ChatBox: {
       screen: <ScreenA onUpdate={this._update}/>
    },
    OnlineUsers: {
       screen: <ScreenB userList={this.state.online_users}>
    },
})

屏A

export default class ScreenA extends Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        // Update list of online users when new user joins chat
        this.socket.on('user joins', (payload) => {
            this.props.onUpdate(payload.users)
        })
    }
}

屏幕B

export default class ScreenB extends Component {
    constructor(props) {
        super(props);
    }

    // You can access online user using this.props.userList

 }