• 111


    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),
        },
    })
  • 相关阅读:
    耐心
    百度年会
    聊聊今年的春节联欢晚会
    网速调查
    热烈欢迎两位园友加盟
    遥远的路
    博客园博客程序架构设计图初稿
    [公告]社区与博客实现了登录整合
    博客园上海俱乐部第二次活动继续报道
    [收藏]《观察与思考》:相信中国,寻找下一个比尔·盖茨
  • 原文地址:https://www.cnblogs.com/liushuchen/p/13159559.html
Copyright © 2020-2023  润新知