xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/03/06
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    FlatList,
    Animated,
    Modal,
    StatusBar
} from 'react-native';
import Video from 'react-native-video';

import {height,zoomW,zoomH} from '../../utils/getSize';
import {xnBorderWidth,xnToast,numChange,timeChange} from "../../utils/utils";
import AppService from "../../service/AppService";

const isTop = require('../../img/isTop.png');
const cover = require('../../img/cover.png');
const video = require('../../img/video.png');
const top1 = require('../../img/top1.png');
const top2 = require('../../img/top2.png');
const top3 = require('../../img/top3.png');
const back = require('../../img/back.png');
const close = require('../../img/close.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 PlateList extends Component {
    static navigationOptions = ({ navigation, screenProps })=>({
        title:navigation.state.params.name,
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
                <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                    <Image source={back} style={styles.backIcon} resizeMode="contain" />
                </TouchableOpacity>
                <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.close:null}>
                    <Image source={close} style={styles.closeIcon} resizeMode="contain" />
                </TouchableOpacity>
        </View>),
        headerRight:(<View style={styles.rightTop}>
            <TouchableOpacity style={styles.rightIcon}>
                <Image source={search} style={styles.searchIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.rightIcon} onPress={navigation.state.params?navigation.state.params.showRight:null}>
                <Image source={more} style={styles.moreIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>)
    });

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

    componentWillMount(){
        this.setState({
            title:this.props.navigation.state.params.name,
        });
        AppService.findPostList({boardId:this.props.navigation.state.params.id,sortColumn:'IS_BOARD_TOP'}).then(data=>{
            this.setState({
                loading:false
            });
            if(data.message){
                xnToast(data.message);
                return;
            }
            if(data.errors.length > 0) {
                xnToast(data.errors[0].message);
            }else{
                // console.log(data)
                this.setState({
                    list:data.result,
                });
            }
        });
    }

    componentDidMount(){
        let  _this=this;
        //设置头部
        this.props.navigation.setParams({
            name:this.props.navigation.state.params.name,
            back:()=>{
                this.props.navigation.goBack();
            },
            close:()=>{
                NativeModules.system.navTo("BACK");
            },
            showRight:()=>{
                _this.getPlate();
                _this.setState({
                    showModal:true
                });
                Animated.timing(
                    _this.state.right,
                    {toValue:0}
                ).start();
            }
        });
    };

    /* 渲染列表*/
    keyExtractor = (item,index) => index;
    /*首页列表*/
    renderItem = ({item,index}) => (
        <TouchableOpacity style={styles.listItem}>
            <View style={styles.itemTop}>
                {item.isBoardTop && <Image source={isTop} style={styles.isTopIcon} resizeMode="contain" />}
                <Text numberOfLines={1} style={[styles.itemTitle,{width:item.isBoardTop ? (305/zoomW):(345/zoomW)}]}>{item.title}</Text>
            </View>
            <View style={styles.itemContent}>
                <Image source={video} style={styles.coverImg} resizeMode="contain" />
            </View>
            <View style={styles.itemBottom}>
                <Text style={{fontSize:14,color:'#999'}}>{numChange(item.postCount)}回复</Text>
                <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                    <Image source={cover} style={styles.avatar} resizeMode="cover" />
                    <Text style={{fontSize:14,color:'#999'}}>{item.threadUserName}·{timeChange(item.threadTime)}</Text>
                </View>
            </View>
        </TouchableOpacity>
    );
    /*获取论坛列表*/
    getPlate(){
        AppService.findBoardList({forumId:'2'}).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>
        )
    };
    /*右侧菜单栏关闭*/
    closeRight(){
        this.setState({
            right:new Animated.Value(-(228/zoomW)),
        },function(){
            this.setState({
                showModal:false,
            })
        });
    };
    /*跳转到发帖*/
    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="light-content" />
                <View style={styles.topTab}>
                    <View style={[styles.barItem,{borderBottomWidth:2}]}>
                        <Text style={{fontSize:16,color:'#000'}}>全部</Text>
                    </View>
                    <View style={styles.barItem}>
                        <Text style={{fontSize:16,color:'#666'}}>精华</Text>
                    </View>
                </View>
                <FlatList keyExtractor={this.keyExtractor} data={this.state.list} renderItem={this.renderItem} />
                <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:(14/zoomH)}]} resizeMode="contain" />
                                    </View>
                                    <View style={{flex:5}}>
                                        <TouchableOpacity activeOpacity={0.5} style={styles.plateItem}>
                                            <Text style={{color:'#000',fontSize:16}}>板块</Text>
                                        </TouchableOpacity>
                                        {this.state.plateList && this.state.plateList.map((item,index) => this.renderPlate(item,index))}
                                    </View>
                                </View>
                            </Animated.View>
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    leftIcon:{
        width:(50/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    backIcon:{
        width:(16/zoomW),
        height:(16/zoomH),
        marginLeft:(10/zoomW)
    },
    closeIcon:{
        width:(16/zoomW),
        height:(16/zoomH)
    },
    rightTop:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
    },
    rightIcon:{
        height:'100%',
        width:(34/zoomW),
        display:'flex',
        justifyContent:'center',
    },
    searchIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    moreIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    background:{
        width:'100%',
        height:'100%',
        backgroundColor:'#f2f2f2'
    },
    topTab:{
        width:'100%',
        height:(44/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        backgroundColor:'#fff',
        paddingLeft:(22/zoomW),
        display:'flex',
        flexDirection:'row'
    },
    barItem:{
        width:(68/zoomW),
        height:(44/zoomH),
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        borderBottomColor:'#333',
        borderStyle:'solid',
    },
    listItem:{
        minHeight:(110/zoomH),
        maxHeight:(318/zoomH),
        backgroundColor:'#fff',
        marginBottom:(8/zoomH),
        padding:(15/zoomH),
    },
    itemTop:{
        width:(345/zoomW),
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    itemTitle:{
        color:'#000',
        fontSize:16,
        fontWeight:'600'
    },
    isTopIcon:{
        width:(40/zoomW),
    },
    topNumIcon:{
        width:(40/zoomW),
        marginRight:10,
        marginTop:(2/zoomH)
    },
    coverImg:{
        width:(345/zoomW),
        height:(193/zoomH)
    },
    moreImg:{
        width:(112/zoomW),
        height:(112/zoomW)
    },
    itemContent:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'center',
        marginTop:(15/zoomH),
        marginBottom:(15/zoomH)
    },
    contentText:{
        fontSize:14,
        color:'#666'
    },
    itemBottom:{
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    avatar:{
        width:(20/zoomW),
        height:(20/zoomW),
        borderRadius:(10/zoomW),
        marginRight:(6/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)
    }
});