campus_react_local/App/views/chat/chatTopLayout/index.js

import React ,{Component} from 'react'
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
} from 'react-native'
import {deviceWidth, heightPxToDp, widthPxToDp} from "../../../utils/ScreenUtils";
import _const from "../../../const/_const";

export default class ChatMainTopLayout extends Component{
    constructor(props){
        super(props)
        this.state={}
    }
    getTopLayout=()=>{
        const data = _const.chatViewTopLayout
        const comps = []
        data.map((item,index)=>{
            comps.push(
                <TouchableOpacity key={item.key} style={{marginRight:index===3?0:widthPxToDp(85),justifyContent:'center',alignItems:'center'}}>
                    <Image source={item.image} style={{height:widthPxToDp(100),width:widthPxToDp(100),borderRadius:8}}/>
                    <Text style={{marginTop:heightPxToDp(17),fontSize:15}}>{item.name}</Text>
                </TouchableOpacity>
            )
        })
        return comps
    }
    render(){
        return(
            <View style={{marginLeft:26,width:deviceWidth,marginTop:heightPxToDp(142),flexDirection:'row'}}>
                {this.getTopLayout()}
            </View>
        )
    }
}