最近看的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: '<ListView>',
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 (
<UIExplorerPage
title={this.props.navigator ? null : '<ListView>'}
noSpacer={true}
noScroll={true}>
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
renderSeparator={this._renderSeparator}
/>
</UIExplorerPage>
);
},
_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 (
<TouchableHighlight onPress={() => {
this._pressRow(rowID);
highlightRow(sectionID, rowID);
}}>
<View>
<View style={styles.row}>
<Image style={styles.thumb} source={imgSource} />
<Text style={styles.text}>
{rowData + ' - ' + LOREM_IPSUM.substr(0, rowHash % 301 + 10)}
</Text>
</View>
</View>
</TouchableHighlight>
);
},
_genRows: function(pressData: {[key: number]: boolean}): Array<string> {
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 (
<View
key={`${sectionID}-${rowID}`}
style={{
height: adjacentRowHighlighted ? 4 : 1,
backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC',
}}
/>
);
}
});
var THUMB_URLS = [
require('./Thumbnails/like.png'),
require('./Thumbnails/dislike.png'),
require('./Thumbnails/call.png'),
require('./Thumbnails/fist.png'),
require('./Thumbnails/bandaged.png'),
require('./Thumbnails/flowers.png'),
require('./Thumbnails/heart.png'),
require('./Thumbnails/liking.png'),
require('./Thumbnails/party.png'),
require('./Thumbnails/poke.png'),
require('./Thumbnails/superlike.png'),
require('./Thumbnails/victory.png'),
];
var LOREM_IPSUM = 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
/* eslint no-bitwise: 0 */
var hashCode = function(str) {
var hash = 15;
for (var ii = str.length - 1; ii >= 0; ii--) {
hash = ((hash << 5) - hash) + str.charCodeAt(ii);
}
return hash;
};
var styles = StyleSheet.create({
row: {
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
},
thumb: {
width: 64,
height: 64,
},
text: {
flex: 1,
},
});
module.exports = ListViewSimpleExample;
对于新手来说是不是有些不理解？没关系，我这里带领大家做一个简单的ListView，步骤分解一下。
1.首先引入ListView
这个大家应该都会不用我多说了
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ListView
} from 'react-native';
export default class TestDemo extends Component {
render() {
return (
<View style={styles.container}>
</View>
);
}
}
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
首先咱么先添加一个背景,
<View style={styles.container}></View>
给他添加样式，flex：1,
之后，我们开始添加ListView，该怎么添加呢？
<ListView showsVerticalScrollIndicator={false} dataSource={this.state.dataSource} renderRow={(rowData,rowId) => <Text>{rowId}</Text>}/>
然后根据文档添加数据源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(
<View style={{height:60,alignItems: 'center',flexDirection:'row',borderBottomWidth:0.5,borderBottomColor:'gray'}}>
<Image source={this.props.source}style={{width: 40, height: 40}} />
<Text>{this.props.rowD}</Text>
</View>
);
}}
这是什么组件？头像和名称！常用的组件，大家肯定不陌生。
那么怎么使用呢？
咱么把Text标签换掉。
换成<CellView source={{uri:rowData.logo}} rowD={rowData.team_cn} />
来继续运行一下，看看效果。怎么样？
这里我是把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 (
<View style={styles.container}>
<ListView
showsVerticalScrollIndicator={false}
dataSource={this.state.dataSource}
renderRow={(rowData,rowId) => <CellView source={{uri:rowData.logo}} rowD={rowData.name} />}
/>
</View>
);
}
}
class CellView extends Component {
render(){
return(
<View style={{height:60,alignItems: 'center',flexDirection:'row',borderBottomWidth:0.5,borderBottomColor:'gray'}}>
<Image source={this.props.source}
style={{width: 40, height: 40}} />
<Text>{this.props.rowD}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
marginTop:20,
flex:1,
},
});
ps:有的童鞋可能图片加载不出来，这是因为数据源里面的图片是http链接的，iOS需要修改链接状态，在Xcode里面修改就可以了，这里我就不再多做叙述。
