customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/03/21
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    Animated,
    Modal,
    NativeModules,
    StatusBar,
    ActivityIndicator,
    Platform
} from 'react-native';
import ScrollableTabView,{DefaultTabBar} from 'react-native-scrollable-tab-view';
import EmojiSelector,{Categories} from 'react-native-emoji-selector';
import {height,zoomW,zoomH} from '../../utils/getSize';
import {getHeaderHeight,getHeaderPadding,xnBorderWidth,xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
import HomeList from '../community/homeList'

const back = require('../../img/back.png');
const search = require('../../img/search.png');
const more = require('../../img/more.png');
const post = require('../../img/post.png');
const plate = require('../../img/plate.png');
const selected = require('../../img/selected.png');

export default class community extends Component {
    static navigationOptions = ({navigation}) => ({
        title:'社区',
        header:null,
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../img/root_community.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        )
    });

    constructor(props) {
        super(props);
        this.state = {
            homeList:[],
            newList: [],
            hotList:[],
            right:new Animated.Value(-(228/zoomW)),
            showModal:false,
            loading:true
        };
    };

    componentWillMount(){
        setTimeout(() => {
            this.getList('IS_FORUM_TOP');
            this.getList('NEWEST');
            this.getList('HOTEST');
        },10);
    };
    /*获取帖子列表*/
    getList(param){
        this.setState({
            loading:true
        });
        AppService.findPostList({sortColumn:param,pageSize:10,pageNumber:1}).then(data=>{
            this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else if(data.result && data.result.length > 0){
                this.setState({
                    title:data.result[0].forumName,
                });
                if(param == 'IS_FORUM_TOP'){
                    this.setState({
                        homeList:data.result,
                    });
                }else if(param == 'NEWEST'){
                    this.setState({
                        newList:data.result,
                    });
                }else if(param == 'HOTEST'){
                    this.setState({
                        hotList:data.result,
                    });
                }
            }
        });
    };
    /*获取板块列表*/
    getPlate(){
        AppService.findBoardList({forumId:global.forumId}).then(data=>{
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                this.setState({
                    plateList:data.result
                });
            }
        })
    };
    renderPlate(item,index){
        return(
            <TouchableOpacity key={index} activeOpacity={0.5} style={styles.plateItem} onPress={() => this.toPlate(item.name,item.id)}>
                <Text style={{fontSize:16,color:this.state.title == item.name?'#39f':'#000'}}>{item.name}</Text>
                {this.state.title == item.name && <Image source={selected} resizeMode="contain" />}
            </TouchableOpacity>
        )
    };
    /*关闭app*/
    close(){
        // NativeModules.system.navTo("BACK");
    };
    /*右侧菜单栏显示*/
    showRight(){
        this.getPlate();
        this.setState({
            showModal:true
        },function(){
            Animated.timing(
                this.state.right,
                {toValue:0,duration:200}
            ).start();
        });
    };
    /*右侧菜单栏关闭*/
    closeRight(){
        this.setState({
            right:new Animated.Value(-(228/zoomW)),
        },function(){
            this.setState({
                showModal:false,
            })
        });
    };
    /*跳转到搜索*/
    toSearch(){
        this.props.navigation.navigate('Search',{});
    };
    /*跳转到发帖*/
    toPost(){
        this.props.navigation.navigate('Post',{});
        this.closeRight();
    };
    /*跳转到板块*/
    toPlate(name,id){
        this.props.navigation.navigate('PlateList',{name:name,id:id});
        this.closeRight();
    };

    render() {
        return (
            <View style={styles.background}>
                <StatusBar barStyle="default" />
                <View style={styles.topBar}>
                    <TouchableOpacity activeOpacity={1} style={styles.leftIcon} >
                        <Image source={back} style={styles.backIcon} resizeMode="contain" />
                        <Text style={{color:'#1c1c20',fontSize:16}}></Text>
                    </TouchableOpacity>
                    <View style={styles.title}>
                        <Text style={{fontSize:18,color:'#1c1c20',fontWeight:'600'}}>{this.state.title}</Text>
                    </View>
                    <View style={styles.rightTop}>
                        <TouchableOpacity style={[styles.rightIcon,{marginRight:(6/zoomW)}]} onPress={() => this.toSearch()}>
                            <Image source={search} style={styles.searchIcon} resizeMode="contain" />
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.rightIcon} onPress={() => this.showRight()}>
                            <Image source={more} style={styles.moreIcon} resizeMode="contain" />
                        </TouchableOpacity>
                    </View>
                </View>
                <ScrollableTabView renderTabBar={() => <DefaultTabBar style={styles.tabStyle}/>}
                                   tabBarUnderlineStyle={styles.tabBarLine}
                                   tabBarActiveTextColor="#1c1c20"
                                   tabBarInactiveTextColor="#1c1c20"
                                   tabBarTextStyle={{fontSize:16}}
                >
                    <HomeList tabLabel='首页' homeList={this.state.homeList} navigation={this.props.navigation} />
                    <HomeList tabLabel='最新' newList={this.state.newList} navigation={this.props.navigation} />
                    <HomeList tabLabel='最热' hotList={this.state.hotList} navigation={this.props.navigation} />
                </ScrollableTabView>
                {/*右侧更多*/}
                <Modal animationType={'none'} transparent={true} visible={this.state.showModal} onRequestClose={() => {}}>
                    <View style={styles.modalBg}>
                        <TouchableOpacity style={{flex:1}} onPress={() => this.closeRight()}>
                            <Animated.View style={[styles.rightMenu,{right:this.state.right}]}>
                                {/*onPress={() => {this.toPost()}}*/}
                                <TouchableOpacity activeOpacity={1} style={styles.post} >
                                    {/*<View style={{flex:1}}>*/}
                                        {/*<Image source={post} style={styles.menuTip} resizeMode="contain" />*/}
                                    {/*</View>*/}
                                    <View style={{flex:5}}>
                                        <Text style={{color:'#000',fontSize:16}}></Text>
                                    </View>
                                </TouchableOpacity>
                                <View style={styles.platBox}>
                                    <View style={{flex:1}}>
                                        <Image source={plate} style={[styles.menuTip,{marginTop:Platform.OS == 'ios' ? (12/zoomH):(14/zoomH)}]} resizeMode="contain" />
                                    </View>
                                    <View style={{flex:5}}>
                                        <TouchableOpacity activeOpacity={0.5} style={styles.plateItem}>
                                            <Text style={{color:'#000',fontSize:16}}>板块</Text>
                                        </TouchableOpacity>
                                        <TouchableOpacity activeOpacity={0.5} style={styles.plateItem} onPress={() => this.closeRight()}>
                                            <Text style={{fontSize:16,color:'#39f'}}>首页</Text>
                                            <Image source={selected} resizeMode="contain" />
                                        </TouchableOpacity>
                                        {this.state.plateList && this.state.plateList.map((item,index) => this.renderPlate(item,index))}
                                    </View>
                                </View>
                            </Animated.View>
                        </TouchableOpacity>
                    </View>
                </Modal>
                {this.state.loading && <View style={styles.loadingBg}>
                    <ActivityIndicator size="large" />
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topBar:{
        paddingTop:getHeaderPadding(),
        height:getHeaderHeight(),
        backgroundColor:'#fff',
        display:'flex',
        flexDirection:'row'
    },
    leftIcon:{
        flex:1,
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    title:{
        flex:2.5,
        height:'100%',
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    backIcon:{
        width:(16/zoomW),
        height:(16/zoomH),
        marginLeft:(10/zoomW),
        marginRight:(5/zoomW)
    },
    rightTop:{
        flex:1,
        display:'flex',
        flexDirection:'row',
        justifyContent:'center',
        alignItems:'center',
        paddingRight:(12/zoomW)
    },
    rightIcon:{
        height:'100%',
        width:(40/zoomW),
        display:'flex',
        justifyContent:'center',
        alignItems:'center'
    },
    searchIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    moreIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#1c1c20'
    },
    tabStyle:{
        height:(34/zoomH),
        backgroundColor:'#fff',
        elevation:0
    },
    tabBarLine:{
        width:(20/zoomW),
        backgroundColor:'#1c1c20',
        height:3,
        borderRadius:8,
        left:'16.66%',
        marginLeft:-(10/zoomW)
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)'
    },
    rightMenu:{
        width:(228/zoomW),
        height:height,
        backgroundColor:'#fff',
        position:'absolute',
        right:0,
        paddingLeft:(20/zoomW)
    },
    post:{
        width:'100%',
        height:(30/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    menuTip:{
        width:(20/zoomW),
        height:(20/zoomW),
        marginRight:(10/zoomW),
    },
    platBox:{
        width:'100%',
        display:'flex',
        flexDirection:'row'
    },
    plateItem:{
        width:'100%',
        paddingTop:(14/zoomH),
        paddingBottom:(14/zoomH),
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        paddingRight:(22/zoomW)
    },
    loadingBg:{
        width:'100%',
        height:'100%',
        position:'absolute',
        display:'flex',
        alignItems:'center',
        justifyContent:'center'
    }
});