Блог

Я хочу начать смещение моего списка, но переместить начальную позицию просмотра. В FlatList в настоящее время отображается текущее изображение следующее изображение в списке, но скорее хотелось бы показать текущее изображение предыдущее.

Я уже использую initialScrollIndex и могу прокручивать Index изображения, но я думаю, что при первом монтировании может возникнуть некоторый сбой

Вот изображение с initialScrollIndex именно на том элементе, который я хочу.

Поведение, которое я хочу, — это использовать initialScrollIndex и показывать предыдущий элемент вместо следующего.

 export default class App extends Component {
    flatList = null;

    componentDidMount() {
        setTimeout(() => {

            this.flatList.scrollToIndex({
                index: 3,
                animated: false,
                viewPosition: 1
            })
        }, 10)
    }

    setFlatList = (ref) => {
        this.flatList = ref;
    }

    getItemLayout = (_, index) => ({
        index,
        length: 600,
        offset: 600 * index
    });

    renderItem = ({ index }) => {
        const backgroundColor =
            index === 0 ? "blue" : index === 1 ? "red" : index === 2 ? "green" : index === 3 ? "yellow" : "white";
        return (
            <View style={{ height: 600, backgroundColor, width: 450, justifyContent: "center", alignItems: "center" }}>
                <Text>{`item${index}`}</Text>
            </View>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{ ...StyleSheet.absoluteFillObject }}>
                    <FlatList keyExtractor={(_, index) => `${index}`} getItemLayout={this.getItemLayout} ref={this.setFlatList} data={["yo", "1", "2", "3", "4"]} renderItem={this.renderItem} />
                </View>
            </View>
        );
    }