React Native组件高度变化时如何固定FlatList其他项在底部

对应组件的样式代码如下：

<TouchableOpacity
style={{
height: listDataSource[item.key].isExpanded ? 500 : 140,
width: widthw * 0.8,
marginHorizontal: 12,
backgroundColor: 'red',
}}

问题描述：当isExpanded状态为true、组件高度变为500时，FlatList中的其他列表项会向上移动，需要实现其他列表项始终固定在底部位置。

可直接落地的解决方法 #

• 最低成本方案：给FlatList开启倒置模式
  给FlatList组件添加inverted={true}属性，列表会默认从底部开始向上排列子元素，此时展开某一项时，高度会向列表顶部方向延伸，不会挤压其他项导致位置上移，所有未展开项会始终固定在底部区域，只需要微调下展开/收起的交互逻辑适配倒置布局即可，无额外性能损耗。
• 适配常规布局的方案：动态占位+底部对齐
  如果不想使用倒置布局，给FlatList添加contentContainerStyle={{justifyContent: 'flex-end'}}让内容整体靠底部对齐，同时在列表数据源的最顶部插入一个透明占位项，占位项高度动态计算：列表容器高度 - 所有列表项收起状态的总高度，当某一项触发展开时，同步缩减占位项的高度，抵消展开项增加的高度，就能保证所有实际列表项始终贴在底部，不会出现上移的情况。
• 动效优化：如果需要展开/收起的平滑过渡效果，在修改isExpanded状态前调用LayoutAnimation，避免布局突变的突兀感：

import { LayoutAnimation } from 'react-native';

// 切换展开状态前调用
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
// 再执行setState修改isExpanded值

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