RN的高性能FlatList（相当于安卓的RecycleView、iOS的TableView）组件的基本使用

• 电影列表

• 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,
  },
});

• 效果图

• 项目地址

https://github.com/jiayuanfa/RNMovie