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={[{
                    summary: 'Title Text', key: 'item1', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }, {
                    summary: 'Title Text', key: 'item2', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }, {
                    summary: 'Title Text', key: 'item3', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }, {
                    summary: 'Title Text', key: 'item4', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }, {
                    title: 'Title Text', key: 'item5', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }, {
                    summary: 'Title Text', key: 'item6', icon:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg",
                }]}
                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.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,
    }
})