首页完成效果展示：

一、开发占位图组件

在没有数据的时候使用占位图替代 items 的位置。

在 components 目录里创建 moviesItemPlaceholder.js

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { px } from '../utils/device';

export default class MoviesItemPlaceholder extends Component {
    render() {
        const arr = [1, 2, 3, 4];
        return (
            <View style={styles.page}>
                {arr.map((index) => (
                    <View style={styles.placeholder} key={index}>
                        <View style={styles.img} />
                        <View style={styles.title} />
                        <View style={styles.rate} />
                    </View>
                ))}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        paddingLeft: px(30)
    },
    placeholder: {
        width: px(160),
        marginRight: px(16)
    },
    img: {
        width: px(160),
        height: px(224),
        overflow: 'hidden',
        borderRadius: px(8),
        backgroundColor: '#f8f8f8'
    },
    title: {
        marginTop: px(20),
        backgroundColor: '#f8f8f8',
        height: px(30),
        width: px(130),
        overflow: 'hidden',
        borderRadius: px(8)
    },
    rate: {
        marginTop: px(16),
        backgroundColor: '#f8f8f8',
        height: px(24),
        width: px(130),
        overflow: 'hidden',
        borderRadius: px(8)
    }
});

二、首頁数据请求

使用 postman 之类的工具可以看到，首页接口返回的数据字段大致一样，数据均在 subject_collection_items 字段里，可以疯转一个方法量来请求数据。

var items = ['showing', 'hot', 'tv', 'variety', 'book', 'music'];
items.forEach(type => {
    this.getList(type);
});
getList = (type) => {
    ajax(type, {
      start: 0,
      count: 9
    }).then(value => {
      let state = {}
      state[type] = value.subject_collection_items;
      this.setState(state);
    })
  }

首页页面展示

纵向滑动，使用 ScrollView 组件；横向滑动，使用 FlatList 组件，FlatList 组件的 ListEmptyComponent 表示没有数据时显示的组件，在这里放置占位图组件；

import React from "react";
import { View, Text, StatusBar, StyleSheet, ScrollView, FlatList, TouchableWithoutFeedback } from "react-native";
import { connect } from 'react-redux';
import ajax from "../utils/ajax";
import Header from '../components/header';
import ItemsHeader from '../components/itemsHeader';
import MoviesItem from '../components/moviesItem';
import MoviesItemPlaceholder from '../components/moviesItemPlaceholder';
import Icon from 'react-native-vector-icons/AntDesign';
import { px } from "../utils/device";

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showing: [],
      hot: [],
      tv: [],
      variety: [],
      book: [],
      music: [],
    }
    var items = ['showing', 'hot', 'tv', 'variety', 'book', 'music'];
    items.forEach(type => {
      this.getList(type);
    });
  }
  getList = (type) => {
    ajax(type, {
      start: 0,
      count: 9
    }).then(value => {
      let state = {}
      state[type] = value.subject_collection_items;
      this.setState(state);
    })
  }
  render() {
    const { dispatch, value, navigation } = this.props;
    const { showing, hot, tv, variety, book, music } = this.state;
    const sections = [
      { title: '影院热映', data: showing, type: 'showing' },
      { title: '豆瓣热门', data: hot, type: 'hot' },
      { title: '近期热门剧集', data: tv, type: 'tv' },
      { title: '近期热门综艺节目', data: variety, type: 'variety' },
      { title: '畅销图书', data: book, type: 'book' },
      { title: '热门单曲榜', data: music, type: 'music' }
    ]
    return (
      <View style={styles.page}>
        <Header showBack={false} title='豆瓣评分' backgroundColor='#00b600' color='#fff' />
        <ScrollView>
          <View style={styles.search}>
            <TouchableWithoutFeedback onPress={() => alert