1

我有记录列表。点击每个记录用户将被重定向到详细信息页面。当用户回到列表页面时，列表页面必须保留它的滚动位置（即用户应该登陆他点击过的同一条记录）。我FlatList的如下，

   <FlatList
       ref={ref => this.flatListRef = ref}
       data={equipmentsList}
       renderItem={({ item, index }) => this.renderEquipments(item, index)}
       keyExtractor={item => item.id.toString()}
       onScroll={(e) => this.handleScroll(e)}
    />

每次用户滚动页面时，滚动位置通过使用onScroll方法存储以供以后使用

    onScroll={(e) => this.handleScroll(e)}

这是handleScroll方法

     handleScroll(event) {
        this.setState({ scrollPosition: event.nativeEvent.contentOffset.y });
     }

这是FlatList当用户从详细信息页面返回到列表页面时滚动到所需位置的代码

    componentDidMount() {
        this.flatListRef.scrollToOffset({ offset: scrollPosition, animated: false });
    }

我这样做是componentDidMount因为，this.flatListRef在组件至少呈现一次之前可用。

这里的问题是，当第一次渲染发生时FlatList渲染没有任何滚动位置，然后当 componentDidMout 被调用时FlatList渲染滚动位置（滚动到所需的列表项）。这种行为对于用户来说显然是明显的，即渲染发生了两次。

这里我的疑问是，1.是否可以阻止第一次渲染，以便componentDidMount单独渲染FlatList？

或者

2.当从详细页面返回到列表页面时，是否有任何替代方法可以将用户置于相同的滚动位置？

谢谢你。

4

0 回答 0