xntalk / xntalk-rnapp

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

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

export default class Home extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        header:null
    });

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

    componentWillMount(){
        if (global.initParam && global.initParam != null) {
            if (global.initParam.pageName && global.initParam.pageName == "detail" && global.initParam.id) {

                this.setState({
                    loading: false
                });
                let that = this;
                this.props.navigation.navigate('Detail',{id:global.initParam.id,callBack:()=>{
                    that.getList('IS_FORUM_TOP');
                    that.getList('NEWEST');
                    that.getList('HOTEST');
                }})

            }else {
                setTimeout(() => {
                    this.getList('IS_FORUM_TOP');
                    this.getList('NEWEST');
                    this.getList('HOTEST');
                },10);
            }
        }
        // else {
            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,forumId:global.forumId}).then(data=>{
            this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else {
                this.setState({
                    title:data.forumName,
                });
                if ( data.result && data.result.length > 0){
                    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?'#00be3c':'#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}>
                <View style={styles.topBar}>
                    <TouchableOpacity style={styles.leftIcon} onPress={() => {this.close()}}>
                        <Image source={back} style={styles.backIcon} resizeMode="contain" />
                        <Text style={{color:'#000',fontSize:16}}>发现</Text>
                    </TouchableOpacity>
                    <View style={styles.title}>
                        <Text style={{fontSize:18,color:'#000',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="#00be3c"
                                   tabBarInactiveTextColor="#666"
                                   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}]}>
                                <TouchableOpacity activeOpacity={0.5} style={styles.post} onPress={() => {this.toPost()}}>
                                    <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:'#00be3c'}}>首页</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:'#fff'
    },
    tabStyle:{
        height:(34/zoomH),
        backgroundColor:'#fff',
        elevation:0,
        borderWidth:StyleSheet.hairlineWidth
    },
    tabBarLine:{
        width:(20/zoomW),
        backgroundColor:'#00be3c',
        height:3,
        borderRadius:8,
        left:'24.5%',
        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:(90/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'
    }
});