上一章React
Native实战教程请查看：React
Native使用Flexbox布局
在本章中，我们将向你展示如何在React Native中创建列表ListView，我们将导入Home组件中的List并在屏幕上显示它。
App.js
import React from 'react';
import List from './List.js';
const App = () => {
return <
List />;
};
export default App;
要创建一个列表，我们将使用map()方法。这将遍历一个项目数组，并呈现每个项目。
List.js
import React, {Component} from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native';
class List extends Component {
state = {
names: [
{
id: 0,
name: 'Ben',
},
{
id: 1,
name: 'Susan',
},
{
id: 2,
name: 'Robert',
},
{
id: 3,
name: 'Mary',
},
],
};
alertItemName = item => {
alert(item.name);
};
render() {
return (
<
View>
{this.state.names.map((item, index) => (
<
TouchableOpacity
key={item.id}
style={styles.container}
onPress={() => this.alertItemName(item)}>
<
Text style={styles.text}>{item.name}<
/Text>
<
/TouchableOpacity>
))}
<
/View>
);
}
}
export default List;
const styles = StyleSheet.create({
container: {
padding: 10,
marginTop: 3,
backgroundColor: '#d9f9b1',
alignItems: 'center',
},
text: {
color: '#4f603c',
},
});
【React Native列表ListView – React Native实战教程】当我们运行应用程序时，我们将看到姓名列表。
文章图片
文章图片
推荐阅读
- React Native使用文本输入TextInput元素 – React Native实战教程
- Scala中的方法重载用法指南
- PHP json_decode()函数用法详细介绍
- CSS实现脉冲和阴影详细代码介绍
- 学习ReactJS之前必须了解的5大技能
- jQuery attr()方法用法介绍和代码示例
- 算法设计（查找数组中数字的出现频率）
- 使用C++ STL中的Set计算右侧较小的元素
- Python focus_set()和focus_get()方法用法介绍