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,
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,.3)',width: 6,height: 6,borderRadius: 3,margin: 5 }} />}
activeDot={<View style={{backgroundColor:'red',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
},
});

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