• 電影列表

• Item 先輸出Item元件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
} from 'react-native';

const {width, height} = Dimensions.get('window');

const
 
 imageWidth = width / 3 - 10 * 2;
const imageHeight = imageWidth / 0.7;

type Props = {};

// "35" "40"
// 輸出星星評分元件的方法
const renderStars = (stars) => {

  if (stars === '00') {
    return (
      <View style={styles.starWrappers}>
        <Text>暫無評分</Text>
      </View>
      );
  }

  const
 
 total = 5;
  let full,half,empty;
  full = parseInt(stars[0]); // 表示取出字串的第一位 轉為整數

  if(stars[1] === '5'){
    half = 1;
    empty = total - half - full;
  }else{
    half = 0;
    empty = total - full;
  }

  // 轉化為圖片元件 五個圖片元件
  // 使用map函式 把陣列轉化為元件
  const result = [];

  // 新增滿星星
  let i;
  for(i = 0; i < full; i++){
    result.push(
      <Image 
      key = {i} 
      style={styles.star} 
      source={require
 
('./src/img/star-full.png')} 
      />
      );
  }

  // 新增半顆星
  if (half) {
    i++;
    result.push(
      <Image 
      key = {i} 
      style={styles.star} 
      source={require('./src/img/star-half.png')} 
      />
      );
  }

  // 新增空星星
  for(let j = 0; j < empty; j++){
    result.push(
      <Image 
      key = {i+j+1} 
      style={styles.star} 
      source={require('./src/img/star-empty.png')} 
      />
      );
  }

  return (
    <View style={styles.starWrappers}>
      {result}
    </View>
    );
}

// 直接輸出元件 效能更好 pros為主元件向子元件傳遞的資料包
const Item = (props) => {

// 獲取傳遞過來的資料 一一讀取
const {title, image, stars} = props;

    return (
      <View style={styles.container}>
        <Image 
        // source={require('./src/img/poster.jpg')} 
        source = {{uri:image}}
        style={styles.image}
        />
        <Text numberOfLines={1} style={styles.text}>
        {title}
        </Text>
        {renderStars(stars)}
      </View>
    );
};

export default Item

const styles = StyleSheet.create({
  container: {
    width:imageWidth,
    flexDirection:'column',
    marginRight:15,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  text:{
    marginTop:5,
    width:imageWidth,
    fontSize:20,
    fontWeight:'bold',
    textAlign:'center',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  image:{
    width:imageWidth,
    height:imageHeight,
  },
  star:{
    width:10,
    height:10,
  },
  starWrappers:{
    flexDirection:'row',
    justifyContent:'center',
    marginTop:5,
    marginBottom:15,
  },
});

• 主元件使用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  FlatList,
} from 'react-native';

import Item from './Item';

import Movies from './src/movies.json'

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View>
        <FlatList

          // 設定FlatList的Style
          style={styles.row}

          // 設定每行顯示多少個
          numColumns={3}

          // 設定每個Item的Id
          keyExtractor={item => item.id}

          // 設定資料來源
          data={Movies.subjects}

          // 設定Item資料（Android中為Adapter資料，iOS中為Cell資料）
          renderItem={({item}) => <Item title={item.title} image={item.images.medium} stars={item.rating.stars}/>}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({  
  row:{
    paddingHorizontal:15,
    marginTop:20,
  },
});

• 效果圖

• 專案地址