最近看的RN多了，感觉RN写着比OC写着舒服多了，对比最强烈的就是布局方面，苦逼的手写Autolayout代码。写过的肯定懂得，用Frame写的就不说了...
好的，废话不多说，现在进入正题
咱们先看一下官方文档给的例子
我就直接粘过来了，想深入了解的来戳这里
'use strict';
var React = require('react');
var ReactNative = require('react-native');
var {
Image,
ListView,
TouchableHighlight,
StyleSheet,
RecyclerViewBackedScrollView,
Text,
View,
} = ReactNative;
var UIExplorerPage = require('./UIExplorerPage');
var ListViewSimpleExample = React.createClass({
statics: {
title: '',
description: 'Performant, scrollable list of data.'
},
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
return {
dataSource: ds.cloneWithRows(this._genRows({})),
};
},
_pressData: ({}: {[key: number]: boolean}),
componentWillMount: function() {
this._pressData = {};
},
render: function() {
return (
'}
noSpacer={true}
noScroll={true}>
);
},
_renderRow: function(rowData: string, sectionID: number, rowID: number, highlightRow: (sectionID: number, rowID: number) => void) {
var rowHash = Math.abs(hashCode(rowData));
var imgSource = THUMB_URLS[rowHash % THUMB_URLS.length];
return (
{
this._pressRow(rowID);
highlightRow(sectionID, rowID);
}}>
{rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
);
},
_genRows: function(pressData: {[key: number]: boolean}): Array {
var dataBlob = [];
for (var ii = 0; ii < 100; ii++) {
var pressedText = pressData[ii] ? ' (pressed)' : '';
dataBlob.push('Row ' + ii + pressedText);
}
return dataBlob;
},
_pressRow: function(rowID: number) {
this._pressData[rowID] = !this._pressData[rowID];
this.setState({dataSource: this.state.dataSource.cloneWithRows(
this._genRows(this._pressData)
)});
},
_renderSeparator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) {
return (
对于新手来说是不是有些不理解？没关系，我这里带领大家做一个简单的ListView，步骤分解一下。
1.首先引入ListView
这个大家应该都会不用我多说了
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView
} from 'react-native';
export default class TestDemo extends Component {
render() {
return (
);
}
}
const styles = StyleSheet.create({
});
这是我js文件里的代码，可能有人问我，看的好多文档博客都有一句export default XXX ，为什么你这里没有呢？
大家看好，我在申明组件的时候，在class前面直接加上了export default，其实效果一样的，对于ES6与ES5的区别不了解的童鞋，可以看看
论坛 - React Native中文社区里面的这位大神写的React/React Native 的ES5 ES6写法对照表。
另外，咱们也把StyleSheet也写上，const styles = StyleSheet.create({});
2.开始添加ListView
首先咱么先添加一个背景,
给他添加样式，flex：1,
之后，我们开始添加ListView，该怎么添加呢？
然后根据文档添加数据源dataSource
constructor(props){
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {dataSource: ds.cloneWithRows([{},])};}
dataSource: ds.cloneWithRows熟悉吗？看着是什么格式？json！！！
那么现在来运行一下，是不是出现一行的标号？
3.重点来了，怎么自定义Cell啊？
现在大家可以跟我来做，
我们新做一个组件
class CellView extends Component {
render(){
return(
{this.props.rowD}
);
}}
这是什么组件？头像和名称！常用的组件，大家肯定不陌生。
那么怎么使用呢？
咱么把Text标签换掉。
换成
来继续运行一下，看看效果。怎么样？
这里我是把CellView和ListView放在一个文件里了，有兴趣的童鞋可以把它分离出来，肯定特别简单的。
4.最后怎么能不放上去源码呢？
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView,
Image
} from 'react-native';
export default class TestDemo extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
{logo:'http://upload.jianshu.io/users/upload_avatars/2781235/52637b2553b5.PNG?imageMogr/thumbnail/90x90/quality/100',name:"Demon404"},
{logo:'http://upload.jianshu.io/users/upload_avatars/2781235/52637b2553b5.PNG?imageMogr/thumbnail/90x90/quality/100',name:"Demon404"},
{logo:'http://upload.jianshu.io/users/upload_avatars/2781235/52637b2553b5.PNG?imageMogr/thumbnail/90x90/quality/100',name:"Demon404"},
])
};
}
render() {
return (
);
}
}
class CellView extends Component {
render(){
return(
{this.props.rowD}
);
}
}
const styles = StyleSheet.create({
container:{
marginTop:20,
flex:1,
},
});
ps:有的童鞋可能图片加载不出来，这是因为数据源里面的图片是http链接的，iOS需要修改链接状态，在Xcode里面修改就可以了，这里我就不再多做叙述。