chooseSection.js 4.53 KB
/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from 'react';
import {ActivityIndicator, FlatList, Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {width, zoomH, zoomW} from '../../utils/getSize';
import AppService from "../../service/AppService";
import {xnToast,NoDoublePress} from "../../utils/utils";
// import ForumHeader from "../../widget/ForumHeader";

export default class ChooseSection extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle:'选择版块',
        headerLeft:(
            <View style={{flex:1}}>
                <TouchableOpacity style={{width:40,height:40,justifyContent:'center',alignItems:'center'}} onPress={()=>navigation.goBack()}>
                    <Image style={{width:18,height:18}} source={require('../../img/loadBack.png')}/>
                </TouchableOpacity>
            </View>
        ),
        headerRight:(
            <View></View>
        ),
        // headerStyle:{backgroundColor:'#fff'}
    });

    constructor(props){
        super(props);
        this.state = {
            sectionData:[
            ]
        }
    };

    componentWillMount(){
        let that = this;
        let params={
            forumId:global.forumId,
            isActive:true,
            isAllowThread:true,
            isSystem:false
        };
        this.setState({
            loading:true
        });
        AppService.queryBoard(params).then((data) => {
            console.log(data);
            this.setState({
                loading:false,
            });
            if (data.message) {
                xnToast(data.message);

                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                that.setState({
                    sectionData:data.result?data.result:[]
                });
            }

        }).catch((error) => {
            xnToast(error);
            this.setState({
                loading:false,
            });
        })
    }

    componentDidMount(){
    };


    componentWillUnmount(){
    }

    chooseSection=(item)=>{
        let that = this;
        NoDoublePress.onPress(()=>{
            // this.props.navigation.goBack();
            if(this.props.navigation.state.params.toUploadVideo) {
                this.props.navigation.navigate('UploadVideoFirstStep',{ name: 'UploadVideoFirstStep', item: item, go_back_key: this.props.navigation.state.key });
            } else {
                this.props.navigation.navigate('PublishArticles',{item:item});
            }
        })

    };

    render(){
        return(
            <View style={styles.background}>
                {/*<ForumHeader title={"选择板块"} pop navigation={this.props.navigation}/>*/}


                <FlatList
                    horizontal={false}
                    numColumns={4}
                    data={this.state.sectionData}
                    renderItem={({item}) => (
                        <TouchableOpacity style={styles.section} onPress={()=>this.chooseSection(item)}>
                            <Text numberOfLines={1} style={{fontSize: 13}}>{item.name}</Text>
                        </TouchableOpacity>
                    )}
                    style={{paddingTop:15}}
                />
                {this.state.loading && <View style={styles.loadingBg}>
                    <View style={styles.loadingBox}>
                        <ActivityIndicator size='large' color='#fff'/>
                        <Text style={{fontSize: 16, color: '#fff', marginTop: (6 / zoomH)}}>加载中...</Text>
                    </View>
                </View>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#fff',
        display:'flex',
        paddingLeft:5,
        paddingRight:20,
    },
    section:{
        marginLeft:15,
        justifyContent:'center',
        alignItems:'center',
        marginBottom:15,
        backgroundColor:'#e7e7e7',
        height:35,
        width:(width-85)/4,
        borderRadius: 3
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    }
});