React Native入门到怀疑人生（五）

欢迎收听React Native系列，基于Window10,偏向于Android端的React Native。上一章React Native入门到怀疑人生（四）我们已经讲解了flexbox布局，控件宽高相关知识，本章节将讲解RN的SrollView,ListView,和网络相关知识。本章将使用ES6语法。文章不当之处，希望大家及时指出，多谢！

ScrollView

哇！好熟悉啊！没错RN中的ScrollView和Android中的ScrollView控件概念基本相同。but,如下

ScrollView最适合展示少量有限尺寸的东西。 ScrollView的所有元素和视图都将被渲染，即使它们当前未显示在屏幕上。如果您有更长的项目列表可以在屏幕上，您应该使用ListView代替。

ScrollView渲染视图，会全部渲染。所以使用需要谨慎，防止过度渲染。

/********-----------------scrollview--------------------******///会渲染过度 推荐使用listview
import React, {Component} from 'react';
import {AppRegistry, Text, Image, ScrollView} from 'react-native';

class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
  render() {
    return (
      <ScrollView>
        <Text style={{fontSize: 20}}>Scroll me</Text>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Text style={{fontSize:20}}>If you like</Text>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Text style={{fontSize:20}}>If you like</Text>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
        <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}style={{width: 40, height: 40}}/>
      </ScrollView>
    );
  }
}

AppRegistry.registerComponent('FirstRNProject', () => IScrolledDownAndWhatHappenedNextShockedMe);

gif图录制没搞，暂时就不放图

ListView

金风玉露一相逢,便胜却人间无数

as you think.RN的ListView和Android的listView概念相似。同样需要数据源（dataSource），和解析数据并展示到条目（renderRow）。同时，在初始化ListView的时候，你需要监听rowHasChanged函数，来判断某行数据是否变化，这是必须的属性。当然，你可以发挥你的想象，在Andorid中ListView的属性，都可以移植到RN当中来。至于，具体的用法，会在后面的具体项目中进行实践，敬请期待！

废话不多说，代码上见，如下

/************-------------------listview---------------*******/

import React, {Component} from 'react';
import {AppRegistry, Text, Image, ListView, View} from 'react-native';

class ListViewBasics extends Component {

  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

    this.state = {
      dataSource: ds.cloneWithRows([
        'xyx', 'hl', 'yxix', 'lh', 'yxiac', 'yxxiac'
      ])
    };
  }

  render() {
    return (
      <View style={{flex:1, paddingTop: 22}}>

        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData, rowId) => <Text style={{height: 500}}>{rowData+rowId}</Text>}/>

      </View>
    );
  }
}

AppRegistry.registerComponent('FirstRNProject', () => ListViewBasics);

gif图录制没搞，暂时就不放图

//TODO 相同的数据在ListView和ScrollView中过渡渲染的效果展示

NetWork

React Native提供了和web标准一致的Fetch API，so，you need look fetch.

/************------------------network------------------*********/
import React, {Component} from 'react';
import {AppRegistry, ListView, Text, View} from 'react-native';


getMoviesFromApiAsync()
{
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

// //ES7语法
// async getMoviesFromApi()
// {
//   try {
//     let response = await fetch('https://facebook.github.io/react-native/movies.json');
//     let responseJson = await response.json();
//     return responseJson.movies;
//   } catch (error) {
//     console.error(error);
//   }
// }

代码如上图，其中的.then是因为使用fethc()会返回一个Promise,即简化异步风格的代码。这里有木有和RxJava很像呀😀

其他

刚开始写RN系列，是想分享下自己的学习过程，但是写到这里渐渐发现，如果继续按照此步骤写下去，感觉就有点乏善可陈。
同样一门新技术的学习，必不可少的是练习练习再练习，不敢保证所有人都是通过练习来学习的，但是至少百分之95的人都是这样的。毕竟，如果一味的看别人的教程，在实际遇到的情况下，大部分人都是哈希蒙蔽。
所以，接下来，本站RN系列准备出一个实战的RN项目，作为此系列的终章，希望大家新技术玩的开心，敬请期待！么么哒~