带有垂直标题的水平Flatlist

Question

如何创建具有固定水平和垂直标题的水平平面列表。

这张图片可以帮助您更好地理解我的问题FlatList in ScrollView

我试图将FlatList移到ScrollView，这使我能够始终看到左标题，但是当用户向下滚动顶部标题离开屏幕时，我无法始终显示顶部标题。有没有办法将它们粘在上面。与左标题不同，每个条目的顶部标题都不同，因此我无法使其成为ScrollView的一部分。

return (
<ScrollView style={{flex:1}}
    contentContainerStyle={{ flexDirection: 'row' }}>
    {this.renderVerticalHeader()}
    <View style={{ flexGrow: 1}}>
         <FlatList
             data={flatListContents}
             horizontal={true}
             contentContainerStyle={{ flexGrow:1}}
             centerContent={true}
             renderItem={({ item }) => {
              return (
              <View>{item}</View>
              )}}/>
         </View>
   </ScrollView>
);

FlatList内容呈现为：

 render() {
    return (
        <TouchableOpacity style={{ flex: 1, width: 500 }} onPress={() => this.onPressAction()} >
            <Text>
                {this.renderHeader()}
            </Text>
            <ScrollView
                style={{ flex: 1 }}
                contentContainerStyle={{ flexDirection: 'row' }}
                showsVerticalScrollIndicator={false}
                showsHorizontalScrollIndicator={false}
            >
                {this.renderBody()}
            </ScrollView>
        </TouchableOpacity>
    );
}

我希望FlatList标头始终可见，向下滚动时隐藏。