React Native - 初始化依赖组件

Question

I have two components

1. class VideoSessionScreen extends Component
2. class ChatScreen extends Component

I want to initialise ChatScreen inside VideoSessionScreen component and render it when required.

I am able to render it by using <ChatScreen/> inside the render of VideoSessionScreen .

My problem is, chat screen has componentDidMount which has code to fetch data from server. I want to fire componentDidMount of ChatScreen only once in VideoSessionScreen , however currently it keeps triggering componentDidMount of ChatScreen every-time it re-renders VideoSessionScreen (because is places in conditional render method inside VideoSessionScreen ), find below sample code on render() in VideoSessionScreen for reference

render() {
  return(
    {'video' === this.state.displayScreen &&
      <VideoScreen/>
    }
    {'chat' === this.state.displayScreen &&
        <ChatScreen/>
    }
  );
}

My question is, How do I initialise <ChatScreen> and hide/show (toggle) the component.

I tried storing in constant, state etc. none works.

Thanks.

Answer 1

You have a few options:

1) Don't fetch the data on the ChatScreen component. Use Redux or fetch it on the main component and pass it down.

2) Instead of doing a conditional render, display both screens but set the opacity of the visible one to 1 and of the invisible one to 0. Also use pointerEvents="none" for the invisible screen.

3) Do the same as in 2 but use animations. In shouldComponentUpdate, return false so that the component is not rerendered.

Inside of the render() method:

render() {
  const { displayScreen } = this.props;

  return (
    <VideoScreen opacity={'video' === displayScreen ? 1 : 0} pointerEvents={'video' === displayScreen ? 'auto' : 'none'} />
    <ChatScreen opacity={'chat' === displayScreen ? 1 : 0} pointerEvents={'chat' === displayScreen ? 'auto' : 'none'} />
  );
}

In your View components in VideoScreen and ChatScreen, do this:

render() {
  const { opacity, pointerEvents } = this.props;

  return (
    <View style={{ opacity }} pointerEvents={pointerEvents} />
  );
}