customer / shanghai-railway-rnapp

/**
 * Created by xiniu on 2018/5/9.
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ActivityIndicator,
    ScrollView,
    FlatList,
} from 'react-native';
import ScrollableTabView, { DefaultTabBar, ScrollableTabBar } from 'react-native-scrollable-tab-view';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import { xnToast } from '../../utils/utils';
import AppService from '../../service/AppService';

export default class volunteerServiceDetail extends Component {
  static navigationOptions = ({ navigation, screenProps }) => ({
    title: '志愿服务详情',
    headerLeft: (
      <TouchableOpacity style={styles.backWrap} onPress={() => navigation.goBack()}>
        <Image source={require('../../img/back_gray.png')} resizeMode="contain" />
      </TouchableOpacity>
        ),
    headerRight: (
      <View />
        ),
  });

  constructor(props) {
    super(props);
    this.state = {
      loadMore: false,
      isAll: false,
      loading: true,
      serviceList: [],
      refreshing: false,
    };
  }

  componentWillMount() {
    this.getFirstPage();
  }

    // 请求第一页的数据
  getFirstPage() {
    this.setState({
      serviceList: [{ state: '001' }, { state: '002' }, { state: '003' }, { state: '004' }, { state: '005' }, { state: '006' }],
      loading: false,
    });
  }

  // 切换tab
  changeStatus(obj) {

  }

    /* 渲染列表*/
  keyExtractor = (item, index) => index;
  renderItem({ item, index }) {
    return (
      <View style={[styles.rowWrap, { marginTop: index === 0 ? 10 / zoomH : 0 }]} key={index}>
        <TouchableOpacity style={styles.itemWrap}>
          <View style={[styles.statusFlag, { backgroundColor: index % 2 === 0 ? '#EC5151' : '#CECECE' }]} />
          <View>
            <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
              <Text style={{ fontSize: 14, color: '#373737', fontWeight: '600' }} numberOfLines={1}>徐家汇</Text>
            </View>
            <View style={{ maxWidth: 160 / zoomW, marginBottom: 5 / zoomH }}>
              <Text style={{ fontSize: 13, color: '#4B4B4B' }} numberOfLines={1}>徐家汇站台</Text>
            </View>
            <View style={{ maxWidth: 310 / zoomW }}>
              <Text style={{ fontSize: 13, color: '#868686' }} numberOfLines={1}>2018-03-02／周一<Text style={{ color: '#878787' }}>    7:00-9:00</Text></Text>
            </View>
          </View>
          <View style={styles.btnWrap}>
            {item.state === '001' && <View style={[styles.btn, { borderColor: '#F87C7C' }]} onPress={() => console.log(1111111)}>
              <Text style={{ fontSize: 13, color: '#EC5151' }} numberOfLines={1}>已预约</Text>
              </View>}
            {item.state === '001' && <TouchableOpacity style={[styles.btn, { borderColor: '#4B85E0', marginLeft: 5 / zoomW }]} onPress={() => console.log(1111111)}>
              <Text style={{ fontSize: 13, color: '#4B85E0' }} numberOfLines={1}>取消报名</Text>
              </TouchableOpacity>}
            {item.state === '003' && <View style={[styles.btn, { borderColor: '#CECECE' }]} onPress={() => console.log(1111111)}>
              <Text style={{ fontSize: 13, color: '#CECECE' }} numberOfLines={1}>未完成</Text>
              </View>}
          </View>
        </TouchableOpacity>
      </View>
    );
  }

    // 加载更多
  addList() {

  }

    // 下拉刷新
  onRefresh() {
    this.setState({
      refreshing: true,
      serviceList: [],
      loadMore: false,
      isAll: false,
      loading: true,
    }, () => {
      const timer = setTimeout(() => {
        clearTimeout(timer);
        this.getFirstPage();
        this.setState({
          refreshing: false,
        });
      }, 1000);
    });
  }

  render() {
    return (
      <View style={styles.background}>
        <ScrollableTabView
          style={{ backgroundColor: '#F6F6F6' }}
          renderTabBar={() => <DefaultTabBar style={styles.tabStyle} />}
          tabBarUnderlineStyle={styles.lineStyle}
          tabBarBackgroundColor="#fff"
          tabBarActiveTextColor="#3878B4"
          tabBarInactiveTextColor="#6B6B6B"
          tabBarTextStyle={{ fontSize: 14, fontWeight: 'normal' }}
          onChangeTab={(obj) => {
            this.changeStatus(obj);
          }}
        >
          <View tabLabel="全部">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onEndReachedThreshold={0.5}
              onEndReached={this.addList.bind(this)}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="已预约">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onEndReachedThreshold={0.5}
              onEndReached={this.addList.bind(this)}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="未完成">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onEndReachedThreshold={0.5}
              onEndReached={this.addList.bind(this)}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="缺勤">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onEndReachedThreshold={0.5}
              onEndReached={this.addList.bind(this)}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
          <View tabLabel="已完成">
            <FlatList
              data={this.state.serviceList}
              renderItem={this.renderItem.bind(this)}
              keyExtractor={this.keyExtractor}
              onEndReachedThreshold={0.5}
              onEndReached={this.addList.bind(this)}
              onRefresh={this.onRefresh.bind(this)}
              refreshing={this.state.refreshing}
            />
          </View>
        </ScrollableTabView>
        {this.state.loading && <View style={styles.loadingBg}>
          <ActivityIndicator size="large" />
        </View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backWrap: {
    justifyContent: 'center',
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    height: 44 / zoomH,
  },
  background: {
    flex: 1,
    backgroundColor: '#F6F6F6',
    position: 'relative',
  },
  lineStyle: {
    width: 27 / zoomW,
    height: 3 / zoomH,
    backgroundColor: '#3878B4',
    left: '10%',
    marginLeft: -27 / 2 / zoomW,
  },
  tabStyle: {
    height: 44 / zoomH,
    paddingTop: 10 / zoomH,
    borderWidth: 0,
  },
  rowWrap: {
    paddingLeft: 15 / zoomW,
    paddingRight: 15 / zoomW,
    marginBottom: 10 / zoomH,
  },
  itemWrap: {
    width: '100%',
    height: 84 / zoomH,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    borderTopLeftRadius: 4 / zoomW,
    borderBottomLeftRadius: 4 / zoomW,
    position: 'relative',
  },
  statusFlag: {
    width: 15 / zoomW,
    height: '100%',
    borderTopLeftRadius: 4 / zoomW,
    borderBottomLeftRadius: 4 / zoomW,
    marginRight: 12 / zoomW,
  },
  btnWrap: {
    height: 24 / zoomH,
    flexDirection: 'row',
    alignItems: 'center',
    position: 'absolute',
    top: 11 / zoomH,
    right: 15 / zoomW,
  },
  btn: {
    width: 66 / zoomW,
    height: '100%',
    borderWidth: 1,
    borderRadius: 4 / zoomW,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingBg: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
});