React Native ListView是一个视图组件，其中包含项目列表并显示在垂直可滚动列表中。创建列表视图的最小API是ListView.DataSource。它填充一个简单的数据blob数组，并使用数据源和renderRow回调实例化ListView组件。 renderRow从数据数组中获取一个Blob并返回可渲染组件。
Note: ListView组件已弃用。要实现列表组件，请使用新的列表组件FlatList或SectionList。
ListView示例1
让我们创建一个ListView组件的示例。在此示例中，我们创建一个数据源，并用数组填充它。使用该数组作为其数据源创建一个ListView组件，并将其传递到其renderRow回调中。 renderRow是一个函数，该函数返回渲染行的组件。
import React, { Component } from react
import { Text, ListView, StyleSheet } from react-native
export default class MyListComponent extends Component {
constructor() {
super();
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([Android,iOS, Java,Php, Hadoop,
Sap, Python,Ajax, C++,
Ruby, Rails,.Net, Perl]),
};
}
render</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">
</span><span class="pun"><</span><span class="typ">ListView</span><span class="pln">
dataSource</span><span class="pun">={</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">dataSource</span><span class="pun">}</span><span class="pln">
renderRow</span><span class="pun">={</span><span class="pln">
</span><span class="pun">(</span><span class="pln">rowData</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={{</span><span class="pln">fontSize</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20</span><span class="pun">}}>{</span><span class="pln">rowData</span><span class="pun">}</</span><span class="typ">Text</span><span class="pun">>}</span><span class="pln">
</span><span class="pun">/></span><span class="pln">
</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
}
输出:
在上面的代码中，我们在构造函数中创建ListViewDataSource的实例。 ListViewDataSource是一个参数，并接受包含以下四个参数之一的参数:
- getRowData(dataBlob, sectionID, rowID)
- getSectionHeaderData(dataBlob, sectionID)
- rowHasChanged(previousRowData, nextRowData)
- sectionHeaderHasChanged(previousSectionData, nextSectionData)
ListView示例2
添加了分隔以提供单独的块并更好地显示列表项。props renderSeparator用于在ListView的items之间添加分隔符。
在Text上实现onPress props属性，以在单击列表项时执行操作。
import React from react;
import { View, ListView, StyleSheet, Text,Alert} from react-native;
class ListViewDemo extends React.Component {
constructor(props) {
super(props);
</span><span class="kwd">const</span><span class="pln"> ds </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">ListView</span><span class="pun">.</span><span class="typ">DataSource</span><span class="pun">({</span><span class="pln">rowHasChanged</span><span class="pun">:</span><span class="pln"> </span><span class="pun">(</span><span class="pln">r1</span><span class="pun">,</span><span class="pln"> r2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> r1 </span><span class="pun">!==</span><span class="pln"> r2</span><span class="pun">});</span><span class="pln">
</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
dataSource</span><span class="pun">:</span><span class="pln"> ds</span><span class="pun">.</span><span class="pln">cloneWithRows</span><span class="pun">([</span><span class="pln"> </span><span class="str">"Android"</span><span class="pun">,</span><span class="pln">
</span><span class="str">"iOS"</span><span class="pun">,</span><span class="str">"Java"</span><span class="pun">,</span><span class="str">"Swift"</span><span class="pun">,</span><span class="pln">
</span><span class="str">"Php"</span><span class="pun">,</span><span class="str">"Hadoop"</span><span class="pun">,</span><span class="str">"Sap"</span><span class="pun">,</span><span class="pln">
</span><span class="str">"Python"</span><span class="pun">,</span><span class="str">"Ajax"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"C++"</span><span class="pun">,</span><span class="pln">
</span><span class="str">"Ruby"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"Rails"</span><span class="pun">,</span><span class="str">".Net"</span><span class="pun">,</span><span class="pln">
</span><span class="str">"Perl"</span><span class="pun">,</span><span class="pln">
</span><span class="pun">])</span><span class="pln">
</span><span class="pun">};</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="com">//handling onPress action</span><span class="pln">
getListViewItem </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="pln">rowData</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="typ">Alert</span><span class="pun">.</span><span class="pln">alert</span><span class="pun">(</span><span class="pln">rowData</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
render</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="kwd">return</span><span class="pln"> </span><span class="pun">(</span><span class="pln">
</span><span class="pun"><</span><span class="typ">ListView</span><span class="pln">
style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">container</span><span class="pun">}</span><span class="pln">
dataSource</span><span class="pun">={</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">dataSource</span><span class="pun">}</span><span class="pln">
renderRow</span><span class="pun">={(</span><span class="pln">rowData</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln">
</span><span class="pun"><</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">rowViewContainer</span><span class="pun">}</span><span class="pln">
onPress</span><span class="pun">={</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">getListViewItem</span><span class="pun">.</span><span class="pln">bind</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">,</span><span class="pln"> rowData</span><span class="pun">)}>{</span><span class="pln">rowData</span><span class="pun">}</span><span class="pln">
</span><span class="pun"></</span><span class="typ">Text</span><span class="pun">></span><span class="pln">
</span><span class="pun">}</span><span class="pln">
renderSeparator</span><span class="pun">={(</span><span class="pln">sectionId</span><span class="pun">,</span><span class="pln"> rowId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln">
</span><span class="pun"><</span><span class="typ">View</span><span class="pln"> key</span><span class="pun">={</span><span class="pln">rowId</span><span class="pun">}</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">separator</span><span class="pun">}</span><span class="pln"> </span><span class="pun">/>}</span><span class="com">//adding separation</span><span class="pln">
</span><span class="pun">/></span><span class="pln">
</span><span class="pun">);</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#e5e5e5"
},
separator: {
height: 0.5, width: "100%", backgroundColor: "#000"
},
rowViewContainer: {
flex: 1,
paddingRight: 15,
paddingTop: 13,
paddingBottom: 13,
borderBottomWidth: 0.5,
borderColor: #c9c9c9,
flexDirection: row,
alignItems: center,
fontSize: 20,
marginLeft: 10,
},
});
export default ListViewDemo;
输出:
