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 (
            <TouchableWithoutFeedback onPress={this.onClick}>
                <View style={{alignItems:'center',flex:1}}>
                    <Image style={styles.iconImg} source={this.props.renderIcon}/>
                    <Text style={styles.showText}>{this.props.showText}</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}
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 (
                <View key={jsonData.id} style={styles.slide} >
                    <Text numberOfLines={1}>{jsonData.swiperText}</Text>
                    <Image resizeMode='stretch' style={styles.image} source={{uri: jsonData.imageUri}} />
                </View>
            )
        });
        return(
                 <View style={{flex: 1}}>
                    <ScrollView style={styles.container}>
                        <Swiper style={styles.wrapper} height={140} autoplay
                            onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
                            dot={<View style={{backgroundColor:'rgba(0,0,0,.3)', width: 6, height: 6, borderRadius: 3, margin: 5 }} />}
                            activeDot={<View style={{backgroundColor:'red', width: 6, height: 6, borderRadius: 3, margin: 5 }} />}
                            paginationStyle={{bottom: 0}} loop>
                            {dataDisplay}
                        </Swiper>
                        <View style={styles.imagebutton}>
                            <ImageButton renderIcon={require('../images/home_icons/wdgz.png')}
                                        showText={'我的關注'} tag={'wdgz'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/wlcx.png')}
                                        showText={'物流查詢'} tag={'wlcx'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/cz.png')}
                                        showText={'充值'} tag={'cz'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/dyp.png')}
                                        showText={'電影票'} tag={'dyp'}
                                        onClick={this.onImageButtonClick}/>
                        </View>
                        <View style={styles.imagebutton}>
                            <ImageButton renderIcon={require('../images/home_icons/yxcz.png')}
                                        showText={'遊戲充值'} tag={'yxcz'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/xjk.png')}
                                        showText={'小金庫'} tag={'xjk'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/ljd.png')}
                                        showText={'領京豆'} tag={'ljd'}
                                        onClick={this.onImageButtonClick}/>
                            <ImageButton renderIcon={require('../images/home_icons/gd.png')}
                                        showText={'更多'} tag={'gd'}
                                        onClick={this.onImageButtonClick}/>
                        </View>

                    </ScrollView>
                </View>
        );
    }
}

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

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

安卓和蘋果模擬器裡最終執行的效果如下：