React Native系列之-组件初入门

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

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

以IOS结尾的，IOS的组件
以Android结尾的，Android的组件，
不以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,ListView,} = 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,}),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),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,thumbnail:{ width:53,rightContainer:{ flex:1,title:{ fontSize:20,year:{ textAlign:'center' },listview:{ paddingTop:20,backgroundColor:'#F5FCFF',}); AppRegistry.registerComponent('text',() => text);

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

React Native系列之-组件初入门

相关文章