React Native系列之-组件初入门

    我们先看下官网上的组件一栏，见图：

，
这是目前官网上放出来的组件，可以看到，分为3种

1. 以IOS结尾的，IOS的组件
2. 以Android结尾的，Android的组件，

3. 不以Android或IOS结尾的，公共组件。

   接下来我们以Image+ListView为例，对应Android中的ImageView+ListView。(例子是官方的例子)

/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  Image,  View,} = React;var MOCKED_MOVIES_DATA = [  {    title:'Title',    year:'2015',    posters:{      thumbnail:'http://i.imgur.com/UePbdph.jpg'    }  },];var text = React.createClass({  render: function() {    var movie=MOCKED_MOVIES_DATA[0];    return (      <View style={styles.container}>        <Image source={{uri:movie.posters.thumbnail}}                style={styles.thumbnail}>        </Image>        <View style={styles.rightContainer}>          <Text style={styles.title}>{movie.title}</Text>          <Text style={styles.year}>{movie.year}</Text>        </View>      </View>    );  }});var styles = StyleSheet.create({  container: {    flex: 1,    flexDirection:'row',    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  thumbnail:{    width:53,    height:81,  },  rightContainer:{    flex:1,  },  title:{    fontSize:20,    marginBottom:8,    textAlign:'center',  },  year:{    textAlign:'center'  },});AppRegistry.registerComponent('text', () => text);

我们先看下组件text的结构：

其实和我们用XML写布局是一样的。关于CSS属性，这里基本和网页那边是一样的(有些-可能被去掉了)，具体的CSS属性请参考CSS标准属性，我又仔细地看了下，发现CSS标准属性中带-的，在React.js中，去掉-，并将-后的第一个字符大写。

看看上面代码的效果图。
。

接下来，我们就将ListView加进去。先上张效果图勾引勾引大家。

接下来看看代码。首先嘛，肯定得先将ListView加进来，然后我们看数据的获取。

var API_KEY='7waqfqbprs7pajbz28mqf6vz';var API_URL='http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';var PAGE_SIZE=50;var PARAMS='?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;var REQUEST_URL=API_URL+PARAMS;

这里是拼接请求字符串，官方是25条，我这里是50条。

fetchData:function(){    fetch(REQUEST_URL)      .then((response)=>response.json())      .then((responseData)=>{        this.setState({          dataSource:this.state.dataSource.cloneWithRows(responseData.movies),          loaded:true,        });      })      .done();  },

这里就是将数据获取下来，关于Fetch API，参考Fetch API.
我们看一眼原始数据，见图：

就是一堆的json数据。上面的代码，把movies对应的json数组给了我们初始化的dataSource，这个dataSource是什么呢？

getInitialState:function(){    return {      dataSource:new ListView.DataSource({rowHasChanged:(row1,row2)=>row1 !==row2,}),      loaded:false,    };  },

恩，就是listview对应的数据。接下来我们看返回的视图是啥样子的。

render: function() {    if (!this.state.loaded) {      return this.renderLoadingView();    }    return (        <ListView          dataSource={this.state.dataSource}          renderRow={this.renderMovie}          style={styles.listview}          >          </ListView>      );  },  renderLoadingView:function(){    return (        <View style={styles.container}>          <Text>            Loading movies...          </Text>        </View>      );  },  renderMovie:function(movie){    return (        <View style={styles.container}>          <Image              source={{uri:movie.posters.thumbnail}}              style={styles.thumbnail}>          </Image>          <View style={styles.rightContainer}>            <Text style={styles.title}>{movie.title}</Text>            <Text style={styles.year}>{movie.year}</Text>          </View>        </View>      );  },

分两种，加载的时候和加载完毕。renderMovie是讲数据解析成一条一条的数据显示。多的就不说了，最后来下完整的代码

/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';var React = require('react-native');var {  AppRegistry,  StyleSheet,  Text,  Image,  ListView,  View,} = React;var MOCKED_MOVIES_DATA = [  {    title:'Title',    year:'2015',    posters:{      thumbnail:'http://i.imgur.com/UePbdph.jpg'    }  },];var API_KEY='7waqfqbprs7pajbz28mqf6vz';var API_URL='http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';var PAGE_SIZE=50;var PARAMS='?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;var REQUEST_URL=API_URL+PARAMS;var text = React.createClass({  getInitialState:function(){    return {      dataSource:new ListView.DataSource({rowHasChanged:(row1,row2)=>row1 !==row2,}),      loaded:false,    };  },  componentDidMount:function(){    this.fetchData();  },  fetchData:function(){    fetch(REQUEST_URL)      .then((response)=>response.json())      .then((responseData)=>{        this.setState({          dataSource:this.state.dataSource.cloneWithRows(responseData.movies),          loaded:true,        });      })      .done();  },  render: function() {    if (!this.state.loaded) {      return this.renderLoadingView();    }    return (        <ListView          dataSource={this.state.dataSource}          renderRow={this.renderMovie}          style={styles.listview}          >          </ListView>      );  },  renderLoadingView:function(){    return (        <View style={styles.container}>          <Text>            Loading movies...          </Text>        </View>      );  },  renderMovie:function(movie){    return (        <View style={styles.container}>          <Image              source={{uri:movie.posters.thumbnail}}              style={styles.thumbnail}>          </Image>          <View style={styles.rightContainer}>            <Text style={styles.title}>{movie.title}</Text>            <Text style={styles.year}>{movie.year}</Text>          </View>        </View>      );  },});var styles = StyleSheet.create({  container: {    flex: 1,    flexDirection:'row',    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  thumbnail:{    width:53,    height:81,  },  rightContainer:{    flex:1,  },  title:{    fontSize:20,    marginBottom:8,    textAlign:'center',  },  year:{    textAlign:'center'  },  listview:{    paddingTop:20,    backgroundColor:'#F5FCFF',  },});AppRegistry.registerComponent('text', () => text);

我加载了50条数据，竟然没有OOM，真是神奇！！！