极客笔记在Snack中使用列表
有时，任务是将多个项目存储和显示为列表。对于这个React Native组件，可以使用Flatlist。FlatList还可以设置为可选或可点击。在本文中，展示了使用React Native和JavaScript代码的两个不同示例，第一个示例中的列表项被存储为带有唯一ID的键值对数组，并且进行了获取和渲染。
步骤
步骤-1
步骤1 − 从’react-native’导入FlatList、Text和View。
步骤2 − 创建App.js并编写用于存储列表的代码。列表以数组形式存储，但存储为键值对。每个项目都有一个唯一的ID。
步骤3 − 创建一个箭头函数“showlist”来设置状态以包含所有列表项。
步骤4 − 获取状态变量列表并逐个渲染所有项目。
步骤5 − 使用所需的样式在屏幕上显示项目，使用View和Text。
示例1：在Flatlist中显示所有项目
该项目中使用的重要文件是
- App.js
App.js：这是该项目的主要JavaScript文件。
示例
import React from 'react';
import {FlatList,Text, View} from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={
list:[
{
"id": 1,
"name": "Sector 15 A",
"city": "Faridabad",
"lat": 28.395403,
"lng": 77.315292,
},
{
"id": 2,
"name": "Borivali",
"city": "Mumbai",
"lat": 19.228825,
"lng": 72.854118,
},
{
"id": 3,
"name": "Kolutolla",
"city": "Kolkata",
"lat": 22.578005,
"lng": 88.358536,
},
{
"id": 4,
"name": "Benz Circle",
"city": "Vijayawada",
"lat": 16.499725,
"lng": 80.656067,
},
],
keyid:0,
}
}
showitem= ()=>{
for(var i=0;i<this.state.list.length;i++){
this.setState({keyid:this.state.keyid+1})
}
}
render(){
return(
<View style={{flex: 1, paddingTop:5, backgroundColor: 'forestgreen'}}>
<Text style={{padding:60,fontSize: 18, fontWeight: 'bold'}}>Latitude and Longitude</Text>
<View style={{flexDirection:'row', justifyContent: 'space-between',
alignItems:'center', padding:10, backgroundColor: 'brown', margin: 10}}>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Place</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>City</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Latitude</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Longitude</Text>
</View>
<FlatList
data={this.state.list}
renderItem={({item}) => (
<View style={{flexDirection:'row', justifyContent: 'space-between',
alignItems:'center', padding:10, backgroundColor: 'lawngreen', margin: 10}}>
<Text>{item.name}</Text>
<Text>{item.city}</Text>
<Text>{item.lat}</Text>
<Text>{item.lng}</Text>
</View>
)}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
查看结果
结果可以在线查看。当用户键入代码时，Web视图将默认选择，并且结果会立即显示。
在Snack中的Web视图中显示Flatlist项目
步骤-2
步骤1-从’react-native’导入FlatList、TouchableOpacity、Alert、Text和View。
步骤2-创建App.js并编写用于存储列表的代码。列表以数组形式存在，但存储为键值对。每个项目都有一个唯一的id。
步骤3-创建一个箭头函数“showlist”，将状态设置为包含所有列表项。
步骤4-获取状态变量列表并逐个渲染所有项目。
步骤5-为了使Flatlist的项目可点击，使用TouchableOpacity和所需的样式。
步骤6-当单击列表项时，onPress()函数指定要执行的操作。例如，在将JSON对象转换为文本后，在警报中显示纬度和经度值作为结果。
示例2：使Flatlist中的项目可点击，以显示特定于所选项目的结果
项目中使用的重要文件是
- App.js
App.js：这是该项目的主要JavaScript文件。
示例
import React from 'react';
import {Alert, FlatList,Text, View,TouchableOpacity} from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={
list:[
{
"id": 1,
"name": "Sector 15 A",
"city": "Faridabad",
"lat": 28.395403,
"lng": 77.315292,
},
{
"id": 2,
"name": "Borivali",
"city": "Mumbai",
"lat": 19.228825,
"lng": 72.854118,
},
{
"id": 3,
"name": "Kolutolla",
"city": "Kolkata",
"lat": 22.578005,
"lng": 88.358536,
},
{
"id": 4,
"name": "Benz Circle",
"city": "Vijayawada",
"lat": 16.499725,
"lng": 80.656067,
},
],
keyid:0,
}
}
showitem= ()=>{
for(var i=0;i<this.state.list.length;i++){
this.setState({keyid:this.state.keyid+1})
}
}
render(){
return (
<View style={{flex: 1, paddingTop:5, backgroundColor: 'forestgreen'}}>
<Text style={{padding:60,fontSize: 18, fontWeight: 'bold'}}>Latitude and Longitude</Text>
<View style={{flexDirection:'row', justifyContent: 'space-between',
alignItems:'center', padding:10, backgroundColor: 'brown', margin: 10}}>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Place</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>City</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Latitude</Text>
<Text style={{fontSize: 18, fontWeight: 'bold'}}>Longitude</Text>
</View>
<FlatList
data={this.state.list}
renderItem={
({item ,index}) => (
<View style={{flex: 1, flexDirection:'row', justifyContent: 'space-between', alignItems:'center', padding:10, backgroundColor: 'lawngreen', margin: 10}}>
<TouchableOpacity
key={index.toString()}
onPress={() =>{
let str= JSON.stringify(item.name);
let str1 = JSON.stringify(item.lat);
let str2 = JSON.stringify(item.lng);
Alert.alert(str +" --" + "latitude: " +str1+ "" + "
longitude: " +str2);
//alert(str +" --" + "latitude: " +str1+ "" + "
longitude: " +str2);
}
}
>
<Text>{item.name}</Text>
<Text>{item.city}</Text>
</TouchableOpacity>
</View>
)
}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}
查看结果
结果可以在线上看到。当用户输入代码时，默认选择Web视图，并立即显示结果。Alert.alert()函数可能无法在Web视图中显示结果。因此，可以使用简单的alert()来查看结果。代码示例中显示了这两个语句，其中一个可以作为注释保留。
在选择项目后，在个人手机上显示一个简单的警报的可点击项目的Flatlist
在个人移动设备上显示可点击的Flatlist并显示警报
在这篇文章中，通过两个不同的示例，介绍了在Expo Snack上显示Flatlist的方法。首先介绍了存储列表项的方法，然后介绍了获取列表项并将其显示为Flatlist的过程。示例2还指定了在点击Flatlist项时选择和执行操作的方法。同时，还展示了在线Web视图和个人移动设备上的输出。