React Native中如何让FlatList渲染的JSON数据实现倒序输出

FlatList 不会主动修改传入数据的排序，默认严格按照传入数组的下标顺序从上到下渲染条目，要实现从id=2到id=1的倒序输出，直接反转传入的数组即可，无需改动FlatList核心配置。

方案1：数据存入state前反转（性能最优） #

接口拿到数据后先完成反转再存入state，后续渲染不需要重复执行反转逻辑，是最推荐的写法。
注意：数组原生的reverse()方法会直接修改原数组，容易引发不可预期的副作用，建议先浅拷贝一份数组再执行反转：

searchNews = async () =>
{
  const ertAPI = await fetch(`${e_glav.e_url}/api/news/read.php?nocache`)
  const APIValue = await ertAPI.json();
  const APIResults = APIValue.ertnews
  // 浅拷贝后反转，得到倒序的新数组
  const reversedList = [...APIResults].reverse()
  this.setState({
    data: reversedList,
    isFetching: false
  })
}

对应的FlatList代码不需要做任何调整，直接沿用原有写法即可正常渲染倒序内容：

<FlatList 
  data={this.state.data}
  onRefresh={() => this.onRefresh()}
  refreshing={this.state.isFetching}
  initialNumToRender={4} 
  contentContainerStyle={{ alignSelf: 'stretch' }}
  keyExtractor={({ id }, index) => id} 
  renderItem={({item}) => (
    // 原有条目渲染逻辑
  )}
/>

方案2：传参给FlatList时反转（适合需保留原数据顺序的场景） #

如果后续逻辑需要用到正序的原始接口数据，可以不修改state中存储的原始数组，直接在给FlatList传递data属性时做浅拷贝+反转即可：

<FlatList 
  // 传入时临时生成倒序数组，不修改state内的原数据
  data={[...this.state.data].reverse()}
  onRefresh={() => this.onRefresh()}
  refreshing={this.state.isFetching}
  initialNumToRender={4} 
  contentContainerStyle={{ alignSelf: 'stretch' }}
  keyExtractor={({ id }, index) => id} 
  renderItem={({item}) => (
    // 原有条目渲染逻辑
  )}
/>

避坑提示：不要误用FlatList的inverted属性。该属性的作用是翻转整个列表的滚动方向，开启后会默认定位到列表最底部，仅适合聊天消息流这类特殊场景；如果只是需要反转条目展示顺序、保持正常从顶部开始浏览的交互，直接用上述数组反转的方案即可。

内容的提问来源于stack exchange，提问作者GVINSKY