FlatList的initialScrollIndex出现问题-initialScrollIndex的参数被忽略,显示第一项。https://snack.expo.io/Bk1mkK0zZ
qzlgjiam1#
我也遇到过同样的问题,这就是为什么我找到了你的问题。经过大量测试,我找到了一个变通方法,看起来很有效。在呈现列表后,我使用函数scrollToIndex,而不是使用initialScrollIndex。将它应用到代码中,它看起来像
scrollToIndex
initialScrollIndex
import React, { Component } from 'react'; import { FlatList, Dimensions, View, Text } from 'react-native'; const WIDTH = Dimensions.get('window').width; const HEIGHT = Dimensions.get('window').height; export default class App extends Component { render() { const data = [{id: 0},{id: 1},{id: 2},{id: 3},{id: 4}]; return ( <View onLayout={() => this.onLayout()}> <FlatList ref={el => this.list = el} data={data} renderItem={this.renderItem} keyExtractor={item => item.id} pagingEnabled={true} horizontal={true} showsHorizontalScrollIndicator={false} getItemLayout={this.getItemLayout} debug={true} /> </View> ) } onLayout() { this.list.scrollToIndex({index: 2}) } renderItem = ({ item }) => { return ( <View style={{flex: 1, backgroundColor: 'lightblue', width: WIDTH, height: HEIGHT, justifyContent: 'center', alignItems: 'center'}}> <Text style={{color: 'white', fontSize: 300, fontWeight: 'bold'}}>{item.id}</Text> </View> ); }; getItemLayout = (data, index) => ( {length: WIDTH, offset: WIDTH * index, index} ); }
希望对你有用。顺便说一下,由于某种原因,将this.list.scrollToIndex({index: 2})放在componentDidMount中对我来说不起作用,这就是为什么我使用onLayout代替
this.list.scrollToIndex({index: 2})
onLayout
4szc88ey2#
使用RN 0.61.5我已经通过设置解决了这个问题:
onContentSizeChange
initialNumToRender
onScrollToIndexFailed
<FlatList ref={ref => (this.flatList = ref)} data={dataArray} style={style} eyExtractor={(item, index) => String(index)} onContentSizeChange={() => { if (this.flatList && this.flatList.scrollToIndex && dataArray && dataArray.length) { this.flatList.scrollToIndex({ index: dataArray.length - 1 }); } }} onScrollToIndexFailed={() => {}} renderItem={({ item, index }) => { return ( <Text>Stackoverflow Answer</Text> ); }} />
vmdwslir3#
我用了getItemLayout,一切都很顺利
const getItemLayout=(data, index)=> { return { length: wp(100), offset: wp(100)* index, index }; } <FlatList horizontal pagingEnabled initialScrollIndex={1} snapToAlignment={"start"} decelerationRate={"fast"} showsHorizontalScrollIndicator={false} data={routes} getItemLayout={getItemLayout} renderItem={rowItem}/>
ep6jt1vc4#
我遇到了同样的问题,但我的情况有点不同。在我的例子中,我从0的WIDTH开始,等待onLayout事件回调来设置正确的宽度。因此,在初始渲染时,initialScrollIndex是什么值并不重要,宽度为零时无法滚动。使用Dimensions设置初始宽度为我修复了它。
0
WIDTH
Dimensions
62o28rlo5#
只需删除以下内容:
pagingEnabled = { true }
这将修正您的示例。
tzdcorbm6#
只使用字符串
initialScrollIndex='8'
成功了!:)
6条答案
按热度按时间qzlgjiam1#
我也遇到过同样的问题,这就是为什么我找到了你的问题。经过大量测试,我找到了一个变通方法,看起来很有效。在呈现列表后,我使用函数
scrollToIndex
,而不是使用initialScrollIndex
。将它应用到代码中,它看起来像希望对你有用。
顺便说一下,由于某种原因,将
this.list.scrollToIndex({index: 2})
放在componentDidMount中对我来说不起作用,这就是为什么我使用onLayout
代替4szc88ey2#
使用RN 0.61.5
我已经通过设置解决了这个问题:
onContentSizeChange
,它将在平面列表数据发生更改并呈现所有项时处理滚动到索引(如果需要,您可以使用设置initialNumToRender
处理初始呈现时将呈现的项的数量)scrollToIndex
函数时必须使用的onScrollToIndexFailed
:vmdwslir3#
我用了getItemLayout,一切都很顺利
ep6jt1vc4#
我遇到了同样的问题,但我的情况有点不同。在我的例子中,我从
0
的WIDTH
开始,等待onLayout
事件回调来设置正确的宽度。因此,在初始渲染时,initialScrollIndex
是什么值并不重要,宽度为零时无法滚动。使用Dimensions
设置初始宽度为我修复了它。62o28rlo5#
只需删除以下内容:
这将修正您的示例。
tzdcorbm6#
只使用字符串
成功了!
:)