前言
在一个移动App中，我们最常用的内容展现形式就是列表。今天，我们尝试用React Native完成对列表的开发。
ListView
ListView作为一个React Native官方提供的控件，我们需要了解它的属性。
dataSource
是列表的数据源，通常以一个数组的形式传给ListView。
renderRow
是列表的表现层，我们可以获得dataSource的单项数据，然后用于单项渲染。
官方例子
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// 初始化模拟数据
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}
render() {
return (
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
</View>
);
}
}
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
我们可以看到官方例子的数据比较简单，就是一个字符串的数组，将它在构造方法中，加入到state中。在render方法中，我们即可在renderRow中，渲染我们每项的界面。
自己的一个例子
需求：
请求https://facebook.github.io/react-native/movies.json，将返回数据的电影列表显示出来。
code
ListViewBisc.js
import React, { Component } from 'react';
import {
View,
ListView,
Text,
} from 'react-native';
class ListViewBisc extends Component {
constructor(props) {
super(props);
// Initial of data of ListView
this.state={
ds:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
};
}
// Render ListView
render(){
if (this.props.movies) {
var dataSource = this.state.ds.cloneWithRows(this.props.movies);
return(
<View style={{flex: 1, paddingTop: 22}}>
<ListView
dataSource={dataSource}
renderRow={(movie) => <Text>{movie.title}</Text>}
/>
</View>
)
}else {
return <Text>Loading</Text>
}
}
}
export default ListViewBisc;
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
View,
} from 'react-native';
import ListViewBisc from '../AwesomeProject/App/widget/ListViewBisc'
import HttpClient from '../AwesomeProject/App/widget/HttpClient'
class HelloWorld extends Component {
render(){
return (
<Text>{this.state.title}</Text>
)
}
constructor(props) {
super(props);
this.state={
title:'loading',
};
var self = this;
var httpUrl = 'https://facebook.github.io/react-native/movies.json';
HttpClient.requestAsync(httpUrl , function(responseJson){
self.setState({
title:responseJson.title,
movies:responseJson.movies,
})
});
}
render() {
return (
<View style={{width:400 , height:1000}}>
<ListViewBisc movies={this.state.movies}></ListViewBisc>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);
结合前面讲到的state的作用，我们就不难理解。我们在网络的回调中修改state，然后在render方法中，将state中的movies以props的形式传入<ListViewBisc>中。
然后在ListViewBisc中，将movie的title取出来展示。
至此，我们就走完了，从网络请求到列表显示的完整流程。
如有问题，欢迎指正。
