Navigator
使用导航器可以让你在应用的不同场景（页面）进行切换。导航器通过不同路由来分辨不同的场景。
利用renderScene方法，导航栏可以指定的路由来渲染场景
可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。查看
navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。
注意：这个组件本文说明简单，但使用上有一定难度。
在使用该组件时，一般需要以下几步：
属性：
configScene (function)
可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前路由，一个是当前的路由栈，
然后它返回一个场景配置对象。initialRoute (object)
定义启动加载的路由，路由是导航栏用来识别渲染场景的一个对象，initialRoute必须是initialRouteStack
中的一个路由。initialRoute默认是initialRouteStack中最后一项。initialRouteStack (object)
提供一个路由集合用来初始化。如果没有设置初始路由的话必须设置初始路由。如果没有提供该属性，它将默认被设置
成一个只含有initialRoute的数组。navigationBar (node)
可选参数，提供一个在场景切换的时候保持的导航条。
navigator (object)
可选参数，提供从父容器获得的导航器对象。
onDidFocus (function)
每当导航条切换完成或者初始化之后，调用此函数，参数为新场景的路由。
onWillFocus (function)
会在导航条切换之前调用，参数为目标路由。
renderScene (function)
必要参数。用来渲染指定参数路由的场景。调用的参数是路由和导航器。
senceStyle (View#style)
将会应用在每个场景容器上的样式。
ListView
核心组件，用于高效地显示一个可以垂直滚动的变化的数据列表。最基本的使用方式就是创建一个
ListView.DataSource数据源，然后给它传递一个普通的数据数组，再使用数据源实例化一个ListView组件
，并且定义它的回调函数_renderRow。该函数会接受数组中每个数据作为参数。返回一个可渲染的组件。
ListView还支持一些高级特性，这个本人还没有尝试，以后详解哈。
属性：
renderRow (function)
从数据源中接收一条数据，以及和它所在的section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下
参数中的数据就是放进数据源的数据本身，不过也可以提供一些转换器。如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线
会被隐藏。行的高亮状态可以通过调用highlistRow(null)来重置。renderHeader (function)
渲染页头。
renderSeparator (function)
如果提供了此属性，一个可渲染的组件会被渲染在每一行的下面。除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及
邻近的行是否被高亮会作为参数被传递进来。
例子：
/**
* 猫眼电影列表页
* 数据
* http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=1000
*/
import React, { Component } from 'react';
import {
ListView,
ActivityIndicator,
View,
Text,
Image,
StyleSheet
} from 'react-native';
// 引入猫眼数据
import movieData from './../public/json/maoyan.json';
export default class MoveList extends Component {
constructor(props) {
super(props);
var ds = new ListView.DataSource({
rowHasChanged: (oldData, newData) => oldData !== newData
});
this.state = {
dataSource: ds
};
}
_renderHeader() {
return (
<View style={ styles.header }>
<Text style={ styles.header_txt }>猫眼热门电影</Text>
</View>
);
}
_renderRow(movie) {
return (
<View style={ styles.row }>
<View style={ styles.left }>
<Image source={{ uri: movie.img }} style={ styles.img }></Image>
</View>
<View style={ styles.right }>
<Text style={[ styles.nm, styles.txt_right ]}>{ movie.nm }</Text>
<Text style={[ styles.dir, styles.txt_right ]}>导演：{ movie.dir }</Text>
<Text style={[ styles.rt, styles.txt_right ]}>上映时间：{ movie.rt }</Text>
</View>
</View>
);
}
_renderSeparator() {
return (
<View style={ styles.separator }></View>
);
}
componentDidMount() {
// 把已经解析好的数据使用到我们的页面
var ds = new ListView.DataSource({
rowHasChanged: (oldData,newData) => oldData !== newData
});
this.setState({
dataSource: ds.cloneWithRows(movieData.data.movies)
});
}
render() {
return (
<ListView
style={ styles.container }
dataSource={ this.state.dataSource }
renderHeader={ this._renderHeader }
renderRow={ this._renderRow }
renderSeparator={ this._renderSeparator }
>
</ListView>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 25,
marginLeft: 10,
marginRight: 10,
},
header: {
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderRadius: 6,
},
header_txt: {
fontSize: 30,
color: 'darkgrey'
},
row: {
height: 160,
flexDirection: 'row',
marginTop: 10,
},
left: {
width: 110,
},
right: {
justifyContent: 'center',
},
separator: {
height: 2,
backgroundColor: '#ccc'
},
img: {
width: 100,
height: 150,
},
txt_right: {
marginBottom: 10
},
nm: {
fontSize: 26,
fontWeight: 'bold',
},
dir: {
fontSize: 16,
color: 'orange'
},
rt: {
color: 'grey'
}
});
提示 有关猫眼数据，可点击链接接收JSON数据：http://m.maoyan.com/movie/list.json?type=hot&offset=0&limit=100【limit=?，这里输入的是你要获取电影信息的条目数，最多只能获取100条】
效果图：
