App.js
import React from 'react';
import {
SafeAreaView,
View,
FlatList,
StyleSheet,
Text,
StatusBar,
} from 'react-native';
const DATA = [
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '1',
title: 'First Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '2',
title: 'Second Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
{
id: '3',
title: 'Third Item',
},
];
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const Render_FlatList_Sticky_header = () => {
return (
<>
<Text>hello</Text>
</>
);
};
const App = () => {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={(item) => item.id}
stickyHeaderIndices={[0]}
ListHeaderComponent={Render_FlatList_Sticky_header}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
title: {
fontSize: 32,
},
});
export default App;
它使用粘性标头,但当www.example.com不同时,我希望使用不同的标头item.id
喜欢
- 如果Item.id=1则我的粘性报头文本是“A”,
- 如果Item.id=2则我的粘性报头文本是“B”,
- 如果Item.id=3,则我的粘性标题文本为“B”
我尝试这样做,但它给了我一个错误
- 任何人都能帮我🐼*
3条答案
按热度按时间ffx8fchx1#
你可以这样做:
您可以使用可见项目并获得所需的输出。
你想要这个
if Item.id=1 then my sticky Header text is "A",
,那么现在你有了最上面的项,所以根据Viewable
变量在Render_FlatList_Sticky_header
中添加switch case。如下所示:
bfnvny8b2#
我猜这就是你想要的
klr1opcd3#
你可以使用状态来动态地设置报头。