代码之家 › 专栏 › 技术社区 › Ibrahim Azhar Armar

react native-init依赖项组件

react-native typescript

1

Ibrahim Azhar Armar · 技术社区 · 7 年前

我有两个部件

类videosessionscreen扩展组件
类聊天屏幕扩展组件

我想初始化 ChatScreen 里面 VideoSessionScreen 组件并在需要时进行渲染。

我可以通过使用 <ChatScreen/> 在渲染的内部 视频会话屏幕 .

我的问题是,聊天屏幕 componentDidMount 它有从服务器获取数据的代码。我想开火 组件安装 只有一次进入聊天屏幕 视频会话屏幕 但目前仍在触发 组件安装 属于 聊天屏 每次重新渲染 视频会话屏幕 (因为在条件呈现方法中 视频会话屏幕 )查找下面的示例代码 render() 在里面 视频会话屏幕 供参考

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

我的问题是,如何初始化 <ChatScreen> 隐藏/显示(切换)组件。

我试着用恒量、状态等来储存,但没用。

谢谢。

1 回复 | 直到 7 年前

1

Joshua Obritsch 7 年前

您有几个选择:

1)不要在Chatscreen组件上获取数据。使用Redux或在主组件上取下并传递。

2)不执行条件渲染,而是显示两个屏幕,但将“可见”的不透明度设置为1,将“不可见”的不透明度设置为0。对不可见屏幕也使用pointervents=“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'} />
  );
}

在视频屏幕和聊天屏幕的视图组件中,执行以下操作:

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

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