代码之家  ›  专栏  ›  技术社区  ›  xiaolingxiao

加载和呈现源时响应本地Flatlist检测

  •  1
  • xiaolingxiao  · 技术社区  · 7 年前

    我正在使用 FlatList 我想检测一下,然后加载提要,并呈现前几个项。其想法是,在呈现新闻源之前,将显示初始页面。( https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html ,此时,splash feed将对newsfeed进行动画处理。问题是我在哪里检测到 isRendered 事件。我的 小精灵 有两个可能感兴趣的道具:

    class NewsFeed extends Component {
    
        state = { data: [] }
    
        loadData = async () => { ... }
    
         renderItem = ({ item }) => { ... }
    
        render () { 
           return <FlatList renderItem = {this.renderItem} data={this.state.data} />
        }
    }
    

    我试着翻转 被渲染的 布尔标志作为最后一行 loadData ,但从登录屏幕转换后,在图片呈现之前仍需要一小部分时间(有时)。所以我翻转了 被渲染的 中的布尔标志 renderItem 函数,我们永远不会前进超过启动屏幕,这意味着函数永远不会运行。

    1 回复  |  直到 7 年前
        1
  •  1
  •   sshaul    7 年前

    您可能需要检查rendered在render函数中的值。如果isrendered仍为false,则显示启动屏幕。如果布尔值为真,则可以从该组件开始动画,并在数据已加载时立即显示列表。要使此工作正常进行,请调用setState以像以前那样翻转loadData中的IsRended布尔值,以便在加载数据后再次调用呈现函数。(您可以调用componentdidmount中的loaddata函数,因为在安装组件时,将立即调用此函数)。

    如果动画是从另一个组件调用的,您可能希望在那里加载数据,并在该组件的呈现函数中执行IsRended检查,然后可能将数据作为一个属性传递,以确保新闻源组件已经加载了数据。