【React Native】实战写一个电影列表页（六）

这一节介绍，如何用React Native实现一个电影列表页。主要目的就是，熟悉React Native基本语法。

一、先看下要做成什么样子

这里涉及到的知识点主要就是：1、熟悉FlatList控件使用规则；2、熟悉styles属性；3、熟悉React Native基本语法规则。

二、FlatList控件使用：

<FlatList                    style={styles.row}                    numColumns={3}                    keyExtractor={item => item.id}                    data={movies.subjects}                    renderItem={                        ({item}) =>                    <Item                    title={item.title}                    image={item.images.medium}                    stars={item.rating.stars}/>                    }                />

FlatList跟其他控件类似，可以通过设置styles属性来控制样式，numColumns指定一共有多少列，keyExtractor指定每一项的id，data指定数据源，renderItem用来为每一个Item设置参数。

其中，Item为自定义的控件。以下为Item.js的源码：

import React, {Component} from 'react';import {    StyleSheet,    View,    AppRegistry,    Text,    Image,    Dimensions,} from 'react-native';const {width, height} = Dimensions.get('window');const thirdWidth = width / 3;const imageWidth = thirdWidth - 10 * 2;const imageHeight = imageWidth / 0.697export default class Item extends Component {    render() {        const {title, image, stars} = this.props;        return (            <View style={styles.root}>                <Image source={{uri:image}}                       style={styles.image}/>                <Text style={styles.title} numberOfLines={1}>{title}</Text>                {renderStars(stars)}            </View>        );    }}const renderStars = (stars) => {    const total = 5;    let full, half, empty;    full = stars[0];    if (stars[1] === '5') {        full++;        half = 0;        empty = total - full;    } else {        half = 1;        empty = total - full - half;    }    const results = [];    let i;    for (i = 0; i < full; i++) {        results.push(            <Image                key={i}                style={styles.stars}                source={require("../img/star-full.png")}            />);    }    if (half) {        results.push(            <Image                key={i}                style={styles.stars}                source={require("../img/star-half.png")}            />);        i++;    }    for (let j = 0; j < empty; j++) {        results.push(            <Image                key={i+j}                style={styles.stars}                source={require("../img/star-empty.png")}            />);    }    return (        <View style={styles.starsWrapper}>            {results}        </View>    );}const styles = StyleSheet.create({    root: {        width: imageWidth,        marginRight: 15,        marginTop: 20,    },    image: {        height: imageHeight,        width: imageWidth,    },    title: {        fontSize: 20,        fontWeight: 'bold',        textAlign: 'center',    },    starsWrapper: {        flexDirection: 'row',    },    stars: {        width: 10,        height: 10    }});

三、熟悉styles属性：

该电影列表的布局思路如下：

1、首先给FlatList加一个paddingHorizontal属性，使得FlatList左右空出15；

2、设置图片宽度为屏幕宽度-4*间隔，设置图片高度为宽度的1.3倍；

const {width, height} = Dimensions.get('window');const thirdWidth = width / 3;const imageWidth = thirdWidth - 10 * 2;const imageHeight = imageWidth / 0.697

在styles里把imageWidth和imageHeight赋值给height和width就行了。

3、给Item设置marginTop；给Text设置一行显示，api为numberOfLines；

四、熟悉React Native基本语法

1、定义控件的两种方式：

（1）函数法：

const renderStars = (stars) => {    const total = 5;    let full, half, empty;    full = stars[0];    if (stars[1] === '5') {        full++;        half = 0;        empty = total - full;    } else {        half = 1;        empty = total - full - half;    }    const results = [];    let i;    for (i = 0; i < full; i++) {        results.push(            <Image                key={i}                style={styles.stars}                source={require("../img/star-full.png")}            />);    }    if (half) {        results.push(            <Image                key={i}                style={styles.stars}                source={require("../img/star-half.png")}            />);        i++;    }    for (let j = 0; j < empty; j++) {        results.push(            <Image                key={i+j}                style={styles.stars}                source={require("../img/star-empty.png")}            />);    }    return (        <View style={styles.starsWrapper}>            {results}        </View>    );}

这个方法返回值为“星星评分”，使用时，只需要在render方法里：{renderStars(stars)}就可以了。

（2）组件法：

export default class App extends Component {    render() {        return (            <View>                <FlatList                    style={styles.row}                    numColumns={3}                    keyExtractor={item => item.id}                    data={movies.subjects}                    renderItem={                        ({item}) =>                    <Item                    title={item.title}                    image={item.images.medium}                    stars={item.rating.stars}/>                    }                />            </View>        );    }}

demo地址（觉得ok，可以先star，会持续优化）