前言
在一個移動App中最住，我們最常用的內(nèi)容展現(xiàn)形式就是列表遍烦。今天狭姨，我們嘗試用React Native完成對列表的開發(fā)婆硬。
ListView
ListView作為一個React Native官方提供的控件狠轻，我們需要了解它的屬性。
dataSource
是列表的數(shù)據(jù)源柿祈，通常以一個數(shù)組的形式傳給ListView哈误。
renderRow
是列表的表現(xiàn)層，我們可以獲得dataSource的單項數(shù)據(jù)躏嚎，然后用于單項渲染蜜自。
官方例子
import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';
class ListViewBasics extends Component {
// 初始化模擬數(shù)據(jù)
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>
);
}
}
// 注冊應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個整體注冊一次，而不是每個組件/模塊都注冊
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);
我們可以看到官方例子的數(shù)據(jù)比較簡單卢佣，就是一個字符串的數(shù)組重荠，將它在構(gòu)造方法中，加入到state中虚茶。在render方法中戈鲁，我們即可在renderRow中，渲染我們每項的界面嘹叫。
自己的一個例子
需求：
請求https://facebook.github.io/react-native/movies.json婆殿，將返回數(shù)據(jù)的電影列表顯示出來。
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);
結(jié)合前面講到的state的作用罩扇，我們就不難理解婆芦。我們在網(wǎng)絡(luò)的回調(diào)中修改state，然后在render方法中喂饥，將state中的movies以props的形式傳入<ListViewBisc>中消约。
然后在ListViewBisc中，將movie的title取出來展示员帮。
至此或粮，我們就走完了，從網(wǎng)絡(luò)請求到列表顯示的完整流程捞高。
如有問題氯材，歡迎指正渣锦。
