customer / shanghai-railway-rnapp

/**
 * Created by Cassie on 2018/05/14
 */
import React, {Component} from "react";
import {
    ActivityIndicator,
    DeviceEventEmitter,
    Image,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import {zoomH, zoomW} from "../../utils/getSize";
import ScrollableTabView, {DefaultTabBar} from "react-native-scrollable-tab-view";
import SearchPersonal from "../Search/SearchPersonal";
import HomeList from "../home/HomeList";
import SearchGeneral from "../Search/SearchGeneral";
import {getHeaderHeight, getHeaderPadding} from "../../utils/utils";

const searchB = require("../../img/searchB.png");
const back = require("../../img/loadBack.png");

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

  constructor(props) {
    super(props);
    this.state = {
        isLoading:false
    };
  }

    componentDidMount () {
        let _this = this;
        this.gotoUser = DeviceEventEmitter.addListener("goToUser", function() {
                                       _this.scrollableTabView.goToPage(5);
                                       });
    }
    componentWillUnmount() {
        this.gotoUser.remove();
    }
    
    
  componentWillMount() {
    let _this = this;

    this.deEmitter = DeviceEventEmitter.addListener('loadComplete', () => {
        console.log('getTopicInfo' + url);
        _this.setState({
            isLoading:false
        })
    });
  }

  render() {
    return (
      <View style={styles.background}>
        <StatusBar
          backgroundColor={"#B0B1B1"}
          networkActivityIndicatorVisible
        />
        {/*头部*/}
        <View>
          {/*信号区*/}
          <View
            style={{ height: getHeaderPadding(), backgroundColor: "#ffffff" }}
          />
          {/*title*/}
          <View style={styles.title}>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.goBack();
              }}
              style={styles.back}
            >
              <Image source={back} />
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                this.props.navigation.goBack();
              }}
              style={styles.topSearchView}
            >
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  width: "100%",
                  height: "100%",
                  marginLeft: 15 / zoomW,
                  marginRight: 15 / zoomW
                }}
              >
                <Image
                  style={{ width: 14, height: 14 }}
                  resizeMode='contain'
                  source={searchB}
                />
                <Text
                  style={{
                    color: "rgba(0,0,0,0.85)",
                    fontSize: 14,
                    marginLeft: 5 / zoomW
                  }}
                  numberOfLines={1}
                >
                  {this.props.navigation.state.params.inputTextV}
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text
                style={{
                  color: "rgba(0,0,0,0.65)",
                  fontSize: 14,
                  marginRight: 13
                }}
              >
                搜索
              </Text>
            </TouchableOpacity>
          </View>
        </View>

        {/*顶部tabView滑动切换布局*/}
        <ScrollableTabView
          renderTabBar={() => <DefaultTabBar style={styles.tabStyle} />}
          ref={ref => {
            this.scrollableTabView = ref;
          }}
          tabBarUnderlineStyle={styles.tabBarLine}
          tabBarActiveTextColor="#00BB3C"
          tabBarInactiveTextColor="#666"
          tabBarTextStyle={styles.tabBarTextStyle}
          onChangeTab={this.handleChangeTab}
        >
          <SearchGeneral
            tabLabel="综合"
            navigation={this.props.navigation}
            triData={this.props.navigation.state.params.inputTextV}
          />

          <HomeList
            tabLabel="图文"
            arr_keyValue={[
              { keyword: this.props.navigation.state.params.inputTextV },
              { threadType: 0 }
            ]}
            navigation={this.props.navigation}
          />
            <HomeList
            tabLabel="图集"
            arr_keyValue={[
                           { keyword: this.props.navigation.state.params.inputTextV },
                           { threadType: 1 }
                           ]}
            navigation={this.props.navigation}
            />
            <HomeList
            tabLabel="问答"
            arr_keyValue={[
                           { keyword: this.props.navigation.state.params.inputTextV },
                           { threadType: 3 }
                           ]}
            navigation={this.props.navigation}
            />
          {/*还没有*/}
          <HomeList
            tabLabel="视频"
            arr_keyValue={[
              { keyword: this.props.navigation.state.params.inputTextV },
              { threadType: 2 }
            ]}
            navigation={this.props.navigation}
          />
          {/*还没有*/}
          <SearchPersonal
            tabLabel="用户"
            navigation={this.props.navigation}
            triData={this.props.navigation.state.params.inputTextV}
          />
            <HomeList
                tabLabel="课程"
                arr_keyValue={[
                    { keyword: this.props.navigation.state.params.inputTextV },
                    { threadType: 5 }
                ]}
                navigation={this.props.navigation}
            />
        </ScrollableTabView>
        {(this.state.isLoading) && (
            <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: "#ececf1",
    display: "flex"
  },
  title: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    width: "100%",
    height: getHeaderHeight() - getHeaderPadding(),
    backgroundColor: "#ffffff"
  },
  back: {
    width: 30 / zoomW,
    height: 30 / zoomW,
    padding: 15 / zoomW,
    justifyContent: "center",
    alignItems: "center"
  },
  topSearchView: {
    flex: 1,
    width: "100%",
    height: 32 / zoomH,
    backgroundColor: "#EDEDED",
    borderRadius: 4,
    display: "flex",
    marginLeft: 15 / zoomW,
    marginRight: 15 / zoomW
  },
  tabStyle: {
      backgroundColor: "#fff",
      padding: 0,
      elevation: 0,
      borderWidth: StyleSheet.hairlineWidth,
  },

    tabBarTextStyle: {
        fontSize: 14,
        padding: 0,
        alignItems: "center",
        justifyContent: "center"
    },

    tabBarLine: {
    width: 20 / zoomW,
    backgroundColor: "#FFFFFF",
    height: 0,
    borderRadius: 8,
    left: "24.5%",
    marginLeft: -(10 / zoomW)
},
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"
}
});