React native 锁定平面列表中的滚动位置（和滚动视图）

我正在尝试创建一个平面列表，使当前滚动位置保持锁定，并且不会因插入列表顶部的新项目而改变

我创造了一个新的世界来证明我的意图

零食显示一个带有绿色项目的滚动视图，最后显示一个黑色项目。 当应用程序启动时，它会滚动到列表的底部。五秒钟后，在顶部插入10个项目，滚动位置根据这些项目的总大小而变化

这是世博快餐的代码：

import React, { Component } from 'react';
import { View, FlatList } from 'react-native';

const renderItem = ({ item }) => {
  let backgroundColor;
  if (item == 10) {
    backgroundColor = "black"
  }
  else {
    backgroundColor = item % 2 == 0 ? 'green' : 'blue'
  }

  return (
    <View
      style={{
        width: 200,
        height: 50,
        backgroundColor,
        margin: 10,
      }}
    />
  );
};

const MyList = class extends Component {
  componentDidMount() {
    setTimeout(() => this.ref.scrollToEnd({ animated: false }), 500);
  }
  render() {
    return (
      <FlatList
        ref={r => this.ref = r}
        data={this.props.data}
        renderItem={this.props.renderItem}
      />
    );
  }
};

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 10],
    };
  }

  componentDidMount() {
    const items = [...this.state.items];
    items.unshift(1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
    setTimeout(() => this.setState({ items }), 5000);
  }

  render() {
    return <MyList renderItem={renderItem} data={this.state.items} />;
  }
}

import React，{Component}来自'React'；
从“react native”导入{View，FlatList}；
常量renderItem=（{item}）=>{
让背景色；
如果（项目==10）{
backgroundColor=“黑色”
}
否则{
backgroundColor=项目%2==0？“绿色”：“蓝色”
}
返回(
);
};
const MyList=类扩展组件{
componentDidMount（）{
setTimeout（（）=>this.ref.scrollToEnd（{animated:false}），500）；
}
render（）{
返回(
this.ref=r}
data={this.props.data}
renderItem={this.props.renderItem}
/>
);
}
};
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[2,2,2,2,2,2,2,2,2,2,2,2,2,2,10]，
};
}
componentDidMount（）{
const items=[…this.state.items]；
项目.取消移位（1,1,1,1,1,1,1,1,1,1,1,1）；
setTimeout（（）=>this.setState（{items}），5000；
}
render（）{
返回；
}
}

我想保持滚动位置锁定，这意味着-当项目被插入时，滚动位置不会改变（或者至少在某种程度上用户不知道发生了什么）

---

有没有办法用当前的FlatList和ScrollView API来实现这一点？要实现此功能，需要实现哪些功能？

您是否尝试过使用

keyExtractor

？( ).

---

它可能有助于避免重新渲染，因此请尝试为每个项目使用唯一键。

您应该使用componentDidUpdate（）来实现这一点

componentDidUpdate(prevProps, prevState) {
  if(prevProps.data != this.props.data) {
    this.ref.scrollToEnd({ animated: false });
  }
}

将其添加到MyList组件中。当组件获取并接收新的props.data时，它将调用scrollToEnd

这可能会有帮助