FlatList React-Native固定高度中的交错布局呈现项目空白问题

Question

我正在尝试借助平面列表制作交错的布局列表。我对每个渲染项目使用不同的高度，但行项目之间仍然有空白。flatlist renderRow将大项目高度设置为第二行项目高度。

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {key: 'a'},
        {key: 'b'},
        {key: 'a'},
        {key: 'b'},
        {key: 'a'},
        {key: 'b'},
      ],
    };
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <FlatList
          data={this.state.data}
          numColumns={2}
          renderItem={({item, index}) => (
            <Text
              style={{
                height: index % 2 === 0 ? 200 : 250,
                flex: 1,
                backgroundColor: index % 2 === 0 ? 'green' : 'red',
              }}>
              hello + {index}
            </Text>
          )}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
}