小编pin*_*man的帖子

我正在尝试构建一个具有左右轮播的反应本机屏幕，在轮播的每个面板中都有一个带有项目列表的垂直平面列表。最多有 8-10 个轮播面板，平面垂直平面列表中最多有 5-30 个项目，因此最多可能有 300 个呈现的项目，但通常为 100 个。

我正在调用 API 并每 2-3 秒检查一次服务器上的数据，并使用新数据设置组件中的状态。目前，此功能有效，并且子组件中的数据会按预期更新。

平面列表中的每个项目都是可单击的，这会触发在页面中启动模式弹出窗口。我遇到的问题是模态弹出窗口需要 4-5 秒才能出现和关闭。此外，当模态最终开始消失时，动画会变得不稳定，并且深色背景层在被删除时似乎会闪烁。

我首先尝试使用内置模态，还使用了react-native-modal 包，两者都是相同的。

我尝试使用 InteractionManager.runAfterInteractions 以及 shouldComponentUpdate(nextProps, nextState) 来尝试阻止我的 api 调用，直到动画完成或阻止我的 isModalVisible 状态属性在我更改它时导致重新渲染。

下面的代码，任何帮助将不胜感激。

import {
    Text,
    Button,
    StyleSheet,
    View,   
    FlatList,   
    Dimensions,
    Image,
    Animated,
    SafeAreaView,
    TouchableHighlight,
    InteractionManager,
} from 'react-native';
import React from 'react';
import Title from './Title';
import CarouselMeeting from './CarouselMeeting';
import Modal from 'react-native-modal';
import Carousel from 'react-native-snap-carousel';

class MeetingDisplay extends React.Component {
constructor(props) {
    super(props);        
    this.state = {
        raceList: [],
        meetingList: …