Question

我有两个组成部分

VideoSessionScreen类扩展了组件
ChatScreen类扩展了组件

我想在ChatScreen组件内部初始化VideoSessionScreen并在需要时呈现它。

我可以通过在<ChatScreen/>的渲染中使用VideoSessionScreen来渲染它。

我的问题是，聊天屏幕上有componentDidMount，其中包含用于从服务器获取数据的代码。我只想在componentDidMount中触发一次ChatScreen的VideoSessionScreen，但是当前每次重新释放componentDidMount时，它都会不断触发ChatScreen中的VideoSessionScreen（因为是放在VideoSessionScreen中的条件渲染方法中的位置，请在render()中的VideoSessionScreen上找到以下示例代码以供参考

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

我的问题是，如何初始化<ChatScreen>并隐藏/显示（切换）组件。

我尝试以常量，状态等存储。没有任何作用。

谢谢。

Answer 1

您有几种选择：

1）不要在ChatScreen组件上获取数据。使用Redux或在主要组件上获取它，然后将其传递下来。

2）不执行有条件的渲染，而是显示两个屏幕，而是将可见的屏幕的不透明度设置为1，不可见的屏幕的不透明度设置为0。对于不可见的屏幕，也使用pointerEvents =“ none”。

3）与2中相同，但使用动画。在shouldComponentUpdate中，返回false，以便不重新呈现组件。

在render（）方法内部：

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'} />
  );
}

在VideoScreen和ChatScreen的View组件中，执行以下操作：

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

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

React Native-初始化依赖项组件

1 个答案: