react-native - 是否可以阻止第一次渲染并继续进行 componentDidMount?
问题描述
我有记录列表。点击每个记录用户将被重定向到详细信息页面。当用户回到列表页面时,列表页面必须保留它的滚动位置(即用户应该登陆他点击过的同一条记录)。我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.当从详细页面返回到列表页面时,是否有任何替代方法可以将用户置于相同的滚动位置?
谢谢你。
解决方案
推荐阅读
- sql-server - 如何创建仅用于部署存储过程的 dacpac 文件?
- docker - 运行开发服务器时运行的 Nuxt 许多进程
- c++ - 对符号“pthread_mutexattr_setpshared@@GLIBC_2.2.5”的未定义引用
- java - 如何访问没有对象的类?
- android - com.example.android.bettingapp:layout/abc_dialog_title_material 中的二进制 XML 文件第 40 行错误膨胀类 TextView
- mysql - 计算条目中的空值(列)
- sql - 将短月份名称转换为数字
- php - 如果日期发生变化如何重置计数器
- python - 从希尔伯特变换中得到一组频率,哪个是正确的?
- cakephp - 如何使用日期格式处理查询生成器