如何使用react原生FlatGride添加文本标题

Question

使用下面的代码，我可以根据我的项目列表返回FlatGrid。

return (
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
// staticDimension={300}
// fixed
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground> 
)}
/>
);

但我想在FlatGrid之前添加一些文本。所以我更新我的代码如下。

return (
<View>
<Text style={{color:'#000000'}}>This is the text</Text>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground> 
)}
/>
</View>
);

但是作为上面的代码输出，我只能看到文本。("这就是正文"(。我是个反应迟钝的新手。有人能说我是如何解决这个问题的吗？

Answer 1

尝试SectionGrid

它会给你标题&列表也是相同的组件

<SectionGrid
itemDimension={130}
sections={[
{
title: 'Numbers',
data: [1,2,3,4,5,6],
},
{
title: 'Alphabets',
data: ['A', 'B', 'C', 'D', 'E'],
},
]}
renderItem={({ item }) => (<Text>{item}</Text>)}
renderSectionHeader={({ section }) => (
<Text style={{ fontSize: 20 }}>{section.title}</Text>
)}
/>

Answer 2

这对我很有效。为每个组件使用了不同的屏幕部件。

return (
<View style={{flexDirection: "column",flex: 1, }}>

<View style={{ flex: 1,backgroundColor:'red' }}>
<Text style={{textAlign:'center',fontSize:20}}>This istext</Text>
</View>

<View style={{ flex: 10,backgroundColor:'blue'}}>
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<ImageBackground source={ item.source} style={[styles.itemContainer, ]}>
<Text style={styles.itemName}>{item.name}</Text>
</ImageBackground> 
)}/>
</View>

</View>
);