ScrolltoIndex 在平面列表上不起作用反应原生 [英] ScrolltoIndex not working react-native on a flatlist
本文介绍了ScrolltoIndex 在平面列表上不起作用反应原生的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 flatList
来渲染 json 文件中的项目,我想在按下按钮时滚动到特定索引,我声明了按下按钮的功能,如下所示
I'm using a flatList
to render items from a json file, I want to scroll to a specific index when a button is pressed, I declared the function for button press as below
goIndex = () => {
this.flatListRef.scrollToIndex({animated: true,index:5});
};
虽然它没有显示任何错误,但列表没有移动到指定的索引.
although it doesn't show any errors, the list is not moving to specified index.
反应原生:0.55.4
react-native: 0.55.4
附上FlatList的代码.
Attaching code of FlatList.
<View>
<FlatList
getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
data={this.state.outverse}
renderItem={({item,index}) =>
<View style={styles2.flatview}>
<Text style={styles2.name}>{++index} {item} </Text>
</View>
}
/>
</View>
推荐答案
尝试添加对 FlatList
组件的引用,如下所示:
Try adding reference to your FlatList
component like below :
<View>
<FlatList
getItemLayout={(data, index) => { return {length: 33, index, offset: 33 * index} }}
ItemSeparatorComponent={ () => <View style={ { width:"100%", height: .7, backgroundColor: 'rgba( 52,52,52,1)' } } /> }
data={this.state.outverse}
ref={(ref) => { this.flatListRef = ref; }}
renderItem={({item,index}) =>
<View style={styles2.flatview}>
<Text style={styles2.name}>{++index} {item} </Text>
</View>
}
/>
</View>
在 goIndex
函数中:
goIndex = () => {
this.refs.flatListRef.scrollToIndex({animated: true,index:5});
};
这篇关于ScrolltoIndex 在平面列表上不起作用反应原生的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文