屏幕在React Native中加载时如何滚动到顶部?

时间:2019-02-07 13:54:00

标签: android reactjs react-native react-native-flatlist

我在HomeScreen中使用Flatlist,它向我显示了多个帖子。因此,现在我想要的是无论何时从应用程序注销或关闭应用程序然后打开应用程序,我都应该能够看到Flatlist中的第一项。

我尝试在渲染函数中使用scrollToIndex,但它给我一个错误-undefined is not an object (evaluating '_this2.refs.flatListRef.scrollToIndex')

<FlatList 
    data={this.state.data}
    ref={(ref) => { this.flatListRef = ref; }}
    renderItem={ ({item,index}) =>  this._renderItem(item,index) }
    extraData={[ this.state.data, this.state.checked ]}
/>

这是我在componentDidMount和渲染函数this.refs.flatListRef.scrollToIndex({animated: true,index:0});中尝试使用的方法,但是没有用。

2 个答案:

答案 0 :(得分:1)

用户离开应用程序并随后恢复运行后,

ComponentDidMount 回调将不会运行。您必须改用AppState

  

AppState 可以告诉您应用是在前台还是在后台,并在状态更改时通知您。 [Source]

使给定的示例适合您的需求,并使用this.flatListRef.scrollToIndex({animated: true,index:0})}

滚动

答案 1 :(得分:0)

导入{ 滚动视图, }来自'反应原生';

从'@react-navigation/native'导入{useScrollToTop};

const ref = React.useRef(null);

useScrollToTop(ref);

const goToTopClickAction = () => { ref.current?.scrollTo({ y: 0, 动画:真实, }); };

在 ScrollView 标签中添加 ref={ref}

< ScrollView ref={ref}>