基于React Native构建的仿京东客户端（三） - 功能图标按钮控件封装

ImageButton.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableWithoutFeedback,
} from 'react-native';
export default class ImageButton extends Component {
    constructor(props) {
        super(props);
        this.onClick = this.onClick.bind(this);  // 需要在回调函数中使用this,必须使用bind(this)来绑定
    }
    onClick = () => {
        if (this.props.onClick) {   // 在设置了回调函数的情况下
            this.props.onClick(this.props.showText, this.props.tag);  // 回调Title和Tag
        }
    }
    render() {
        return (
           
               
                   
                    {this.props.showText}
               
           
        );
    }
}
const styles = StyleSheet.create({
    iconImg: {
        width: 38,
        height: 38,
        marginBottom: 2
    },
    showText: {
        fontSize: 12
    }

});

HomePage.js文件完整的代码如下：

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  ScrollView,
  ListView
} from 'react-native';
import Swiper from 'react-native-swiper';
import ImageButton from './ImageButton';
const {width} = Dimensions.get('window');
export default class HomePage extends Component {
    constructor(props){
    super(props)
    this.state = {
        apiData: [
            {id:1,swiperText:'499¥ 限量抢购真八核 腾讯雷霆手机',imageUri: 'http://localhost:8081/images/banner/1.jpg'},
            {id:2,swiperText:'购趣洗手液 赢迪士尼之旅 满88元减22元 满188元减66元',imageUri: 'http://localhost:8081/images/banner/2.jpg'},
            {id:3,swiperText:'潮流焕新季 炫品抄底 3月大促销第三波 时间3月16日~22日',imageUri: 'http://localhost:8081/images/banner/3.jpg'},
            {id:4,swiperText:'三月女人节 春装新品 折后满减 倒数计时',imageUri: 'http://localhost:8081/images/banner/4.jpg'}
        ]}
        this.id = null;
        this.swiperText = null;
        this.imageUri = null;
    }
    render() {
        const data = this.state.apiData;
        let dataDisplay = data.map(function(jsonData){
            return (
               
                    {jsonData.swiperText}
                   
               
            )
        });
        return(
                
                   
                                                    onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
                            dot={}
                            activeDot={}
                            paginationStyle={{bottom: 0}} loop>
                            {dataDisplay}
                       
                       
                                                                    showText={'我的关注'} tag={'wdgz'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'物流查询'} tag={'wlcx'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'充值'} tag={'cz'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'电影票'} tag={'dyp'}
                                        onClick={this.onImageButtonClick}/>
                       
                       
                                                                    showText={'游戏充值'} tag={'yxcz'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'小金库'} tag={'xjk'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'领京豆'} tag={'ljd'}
                                        onClick={this.onImageButtonClick}/>
                                                                    showText={'更多'} tag={'gd'}
                                        onClick={this.onImageButtonClick}/>
                       
                   
               
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    wrapper: {

    },
    slide: {
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },
    image: {
        width:width,
        height: 130,
    },
    imagebutton: {
        flexDirection: 'row',
        marginTop: 10
    },
});

安卓和苹果模拟器里最终运行的效果如下：