react-native - 如何在 flatlist react-native 中使用数组显示数据
解决方案
试试这是一个你可以使用自己的虚拟示例:
import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';
const DATA = [
{
id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
title: 'First Item',
},
{
id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
title: 'Second Item',
},
{
id: '58694a0f-3da1-471f-bd96-145571e29d72',
title: 'Third Item',
},
];
function Item({ title }) {
return (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
<Text>Button</Text>
</View>
);
}
export default function App() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: Constants.statusBarHeight,
},
item: {
backgroundColor: '#f9c2ff',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
flexDirection:'row'
},
title: {
fontSize: 32,
},
});
推荐阅读
- vue.js - 是否可以在 dist 中隐藏服务器 URL(在 Vue.js 中)?
- odata - 在 BW/4HANA 中使用 REST API?
- sql - 使用 row_partition 内的过滤器过滤和排名(使用 row_partition)
- python-3.x - 谷歌 Colab 中的 sqlite3.OperationalError('near "(": syntax error')
- r - 尝试在没有来自 bam() 输出的随机影响的情况下进行预测时出错
- stata - 数值变量的平均值 跨字符串变量中的子组
- c# - 动态 ModalPopupExtender 未触发 OK Click 事件
- node.js - 第一次获取 API 调用真的很慢 - Node JS、React、Express
- javascript - 如何使用 date-fns-tz 检测时区缩写?
- powershell - 将列添加到 csv 文件并根据现有列 powershell 填充新列