Question

我遇到FlatList的initialScrollIndex问题 - 只是忽略了initialScrollIndex的参数，并显示了第一个项目。

https://snack.expo.io/Bk1mkK0zZ

Answer 1

我有完全相同的问题，这就是我找到你的问题的原因。经过大量测试后，我找到了一种解决方法，这似乎有效。我没有使用scrollToIndex，而是在呈现列表后使用了函数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})

希望它适合你。

顺便说一句，将onLayout放在componentDidMount中，由于某种原因不适合我，这就是我使用class Server : Codable { var id : Int? } class Development : Server { var name : String? var userId : Int? } var json = "{\"id\" : 1,\"name\" : \"Large Building Development\"}" let jsonDecoder = JSONDecoder() let item = try jsonDecoder.decode(Development.self, from:json.data(using: .utf8)!) as Development print(item.id ?? "id is nil") print(item.name ?? "name is nil") here而不是

的原因

Answer 2

使用RN 0.61.5

我已经通过设置解决了这个问题：

onContentSizeChange，它会在更改平面清单数据和呈现所有项目时处理滚动到索引的索引（如果需要，您可以设置initialNumToRender处理在初始呈现时将呈现多少个项目）< / p>
onScrollToIndexFailed，在使用scrollToIndex函数时必须使用：

<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>
        );
    }}
/>

Answer 3

我有同样的问题，但我的情况有点不同。在我的情况下，我开始使用WIDTH 0并等待onLayout事件回调来设置正确的宽度。因此，在初始渲染时，initialScrollIndex的值是什么并不重要，它不能以零宽度滚动。使用Dimensions设置初始宽度为我修复它。

Answer 4

只需删除以下内容：

pagingEnabled = { true }

这将解决您的示例。

Answer 5

我使用了 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}/>

Answer 6

这是我的工作解决方法（对于水平，您可以调整垂直方向）：

a1 <- rbind(c(1,3), c(1,2))
A1 <- rbind(c(1, 2), c(1, 4), c(1,3), c(2, 4))
v1 = vector()
for(i in 1:nrow(A1)){
  b = ifelse(all(a1[1,] == A1[i,]),i,NA)
  d = ifelse(all(a1[2,] == A1[i,]),i,NA)
  v1 = c(v1,b,d)
}
v1 = v1[!is.na(v1)]

initialScrollIndex不适用于FlatList反应原生

6 个答案: