React Native 基础练习指北(二)

10

承接上文《React Native 基础练习指北(一)》,我们来看看React Native如果通过接口获取线上数据并展示。

Tips: 如果使用cmd+R无法刷新效果,请检查index.ios.js的权限设置。

一、展示单条数据

通常我们会在require('react-native');后,写好储存API的变量(此处我们使用简单的API做演示):

var REQUEST_URL = 'http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json';

这里我们暂时使用新浪体育2015年中超联赛信息的接口,可以得到中超16支球队2015赛季的相关信息(未经授权,悄悄的使用,打枪的不要)。

接下来,我们要添加一些初始化的状态,我们可以通过this.state.movies === null判断数据是否已经成功加载。将下面的代码加在render方法前面:

getInitialState: function() {
    return {
        teams: null,
    };
},

react-native组件加载完成后,我们需要发送我们的请求。React会在react-native组件加载完成后,使用componentDidMount方法发送请求,并且只发送一次。

componentDidMount: function() {
    this.fetchData();
},

下面,我们需要添加fetchData方法,它是用来取回数据的。在React的工作流程中,setState会触发一次重绘,随后render方法会发现this.state.movies不再是null,你所需要做的就是使用this.setState({movies: data})。牢记在最后要使用done(),否则不会出现错误提示。

fetchData: function() {
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
            teams: responseData.result.data,
        });
    })
    .done();
},

现在,我们需要修改render方法,从而当我们没有拿到数据时,渲染出一个loading视图,随后呈现出第一个球队信息。

render: function() {
    if (!this.state.teams) {
        return this.renderLoadingView();
    }

    var team = this.state.teams[11];
        return this.renderTeam(team);
},

renderLoadingView: function() {
    return (
        <View style={styles.container}>
            <Text>
                Loading teams...
            </Text>
        </View>
    );
},

renderTeam: function(team) {
    return (
        <View style={styles.container}>
            <Image
                source={{uri: team.logo}}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
                <Text style={styles.name}>{team.team_cn}</Text>
                <Text style={styles.rank}>{team.team_order}</Text>
            </View>
        </View>
    );
}

现在,在iOS模拟器中cmd+R,在请求拿到返回数据之前,你会看到“Loading teams...”,随后会渲染出第一个球队信息。

demo-1

二、展示数据列表

下面我们来看看如何把所有数据展示在ListView组件中,而不是仅仅展示一条数据。

首先我们在最上面定义React的时候加入ListView

var {
    AppRegistry,
    Image,
    ListView,
    StyleSheet,
    Text,
    View
} = React;

接下来,我修改render方法,从而能够以列表方式展示出数据:

render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderScoreboard}
        style={styles.listView} />
    );
  },

ListView可以判断哪些数据发生了改变,并在数据更新时,体现在列表中。

我们不难发现,我们使用了this.state中的dataSource。下一步在getInitialState返回的对象中添加空的dataSource。随后,我们讲数据存到dataSource中,我不再使用this.state.movies来避免数据重复加载,而是使用布尔值this.state.loaded来判断数据是否成功获取。

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

下面是完善后的fetchData方法:

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

最后,我们把ListView的样式添加到styles对象中:

listView: {
    paddingTop: 20,
    backgroundColor: '#F5FCFF',
},

demo-2

你可能感兴趣的

靓andyuan · 2015年11月13日

样式又不写全??

回复

minrui_fei · 2016年01月13日

代码不全

回复

Janselz · 2016年05月13日

要是有源码就更好了。

回复

Charles · 2017年05月12日

嗯 楼主的代码很好,让我这个初学者学到了很多。我用的rn是0.44的getInitialState不好使了,把初始化的state写在constructor里了,这个网站接口的logo也不返回了,如果渲染的时候还是写着会报null,renderRow这里需要填一个渲染列表中每一项的方法,也就是renderScoreboard(),需要自己写一下~。

回复

载入中...