ScrolltoIndex在平面列表上无法正常工作

Joj*_*mas 4 scroll list react-native react-native-flatlist

我正在使用a flatList从json文件渲染项目,我想在按下按钮时滚动到特定索引,我声明了按下按钮的功能,如下所示

goIndex = () => {
    this.flatListRef.scrollToIndex({animated: true,index:5});
};
Run Code Online (Sandbox Code Playgroud)

尽管它没有显示任何错误,但是列表没有移动到指定的索引。

反应本机:0.55.4

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>
Run Code Online (Sandbox Code Playgroud)

Kir*_*fda 7

尝试添加对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}
        ref={(ref) => { this.flatListRef = ref; }}
        renderItem={({item,index}) =>
            <View style={styles2.flatview}>
                <Text style={styles2.name}>{++index}  {item} </Text>
            </View>
        }
    />
</View>
Run Code Online (Sandbox Code Playgroud)

并在goIndex功能上:

goIndex = () => {
    this.refs.flatListRef.scrollToIndex({animated: true,index:5});
};
Run Code Online (Sandbox Code Playgroud)

  • goIndex = () =&gt; { this.flatListRef.scrollToIndex({animated: true,index:5}); }; 删除参考文献对我有用。谢谢 (3认同)