import React, {Component} from 'react'; import {Image, StyleSheet, Text, View} from 'react-native' import Swiper from 'react-native-swiper'; import Touchable from "../../component/Touchable"; import {DEVICE_WIDTH, getRealDP as dp} from "../../utils/screenUtil"; import Color from "../../utils/Color"; import {showToast} from '../../utils/Utility' import NavigationUtils from '../../navigator/NavigationUtils' export default class HomeMenu extends Component { constructor(props) { super(props); this.state = { menuSize: 8, menuListItem: [], } } //处理点击跳转 _onJump = (item) => { //点击跳转类型jumpType 0:点击没有反应 1:点击跳转app内部路由 2:跳转H5 if (item.jumpType === 0) { } else if (item.jumpType === 1) { //判断路由是否存在 try { NavigationUtils.goPage({}, item.jumpLink) } catch (e) { showToast('升级后尝试....') } } else { showToast('升级后尝试') } } //加载菜单数据 loadMenuListItem = (menuList) => { let newMenuListItem = [] //封装数据 menuList.map((item, index) => { newMenuListItem.push(<Touchable style={[styles.slidelItem, {height: dp(200)}]} key={index} onPress={() => { this._onJump(item) }}> <Image source={{uri: item.menuImage}} style={styles.slidelIcon}/> <Text style={styles.slidelText}> {item.menuName} </Text> </Touchable>) }) let menuListItem = [] while (newMenuListItem.length > 0) { if (newMenuListItem.length > this.state.menuSize) { menuListItem.push(newMenuListItem.slice(0, this.state.menuSize)) newMenuListItem.splice(0, this.state.menuSize); } else { menuListItem.push(newMenuListItem); newMenuListItem = []; } } return menuListItem; } render() { const {menuList} = this.props; const menuListItem = this.loadMenuListItem(menuList); if (menuListItem.length === 0) { return null; } return ( <View style={{ height: menuList.length > 4 ? 250 : 250 / 2, backgroundColor: Color.WHITE }}> <Swiper> { menuListItem.map((info, index) => { return (<View key={index} style={{ flexDirection: 'row', flexWrap: 'wrap', DEVICE_WIDTH }}> {info} </View>) }) } </Swiper> </View> ); } } //样式 const styles = StyleSheet.create({ slidelItem: { DEVICE_WIDTH / 4, justifyContent: 'center', alignItems: 'center', }, slidelIcon: { dp(80), height: dp(80), }, slidelText: { marginTop: dp(10), fontSize: dp(28), }, })