efunbox-mobile-8/pages/components/ScrollRow.js

/** 
 * @param: 
 *      itemWidth: 每一个图片宽度
 *      itemHeight: 每一个图片高度
 *      data:  数据 Arrary
 */

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View,
    FlatList,
    TouchableOpacity,
    Image
} from "react-native";
import Dimensions from '../utils/dimensions'

export default class ScrollRow extends Component {


    render() {
        return (
            <FlatList

                data={this.props.data}
                horizontal={true}
                renderItem={({ item, separators }) => this.renderItem(item, separators)}
            />
        )
    }

    renderItem(item, separators) {
        return (
            <TouchableOpacity
                style={{
                    // flex: 1,
                    height: this.props.itemHeight,
                    width: this.props.itemWidth,
                    flexDirection: 'row',
                    alignItems: 'center',
                    marginLeft: 9,
                }}
                onPress={() => {
                    alert(item.title);
                }}
                activeOpacity={1}
            >
                <View style={{
                    height: this.props.itemHeight,
                    width: this.props.itemWidth,
                    flexDirection: 'column',
                    alignItems: 'center',
                    // flex: 1,
                }}>
                    <Image
                        source={{
                            uri: item.zoneCourse ? item.zoneCourse.iconImg : item.boothContent
                            // uri: item.icon
                        }}
                        style={{
                            borderRadius: 10,
                            width: this.props.itemWidth,
                            height: this.props.itemHeight,
                            marginBottom: 6,
                        }}
                    />
                    {item.summary
                        ?
                        <Text style={styles.itemSummary}>
                            {item.summary}
                        </Text>
                        :
                        null
                    }

                </View>

            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    wrapper: {

    },
    itemSummary: {
        // flex:1,
        width: '100%',
        height: 20,
        alignItems: 'center',
        justifyContent: "flex-start",
        color: '#151515',
        fontSize: 13,
    }
})