CommunitySearch.js 7.21 KB
//
//  ClassName.js
//
//  Created by Cheney Mars on 2018/9/26.
//  Copyright © 2018年 saygoodlolita. All rights reserved.
//

import React, { Component } from "react";
import {
    Image,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from "react-native";
import { zoomH, zoomW ,width,height} from "../../utils/getSize";
import { getHeaderHeight, getHeaderPadding, getHomeColor,xnToast ,NoDoublePress} from "../../utils/utils";
import CYInput from "../../widget/CYInput";

import TopicBoard from "../topic/TopicBoard";

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

var inputValue;

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

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

    _onPublish = () => {
        NoDoublePress.onPress(()=>{

            this.props.navigation.navigate("TopicBoard", { id: 11 });
        })
    };

    renderHeaderView() {
        let _this = this;
        return (
            <View style={{ flex: 1 }}>
                <CYInput
                    style={styles.topSearchView}
                    ref={c => (this.input = c)}
                    placeholder={"输入搜索关键字"}
                    placeholderTextColor={"#999999"}
                    onFocus={() => {
                        this.setState({
                            data: []
                        });
                    }}
                    onSubmitEditing={event => {
                        if (this.state.queryCount == 0) {
                            this.queryUserByName(event.nativeEvent.text);

                            this.setState({
                                queryCount: 1
                            });
                        }
                        if (this.input.getInputValue() == "") {
                            xnToast("搜索字段不能为空");
                        } else  {
                            NoDoublePress.onPress(()=>{
                                if (this.input.getInputValue().replace(/\s/ig,'').length >10){
                                    xnToast("搜索字段不能超过10个字");
                                    return;
                                }

                                this.props.navigation.navigate("SearchResults", {
                                    inputTextV: this.input.getInputValue()
                                });
                            })
                        }
                    }}
                    onChange={() => {
                        inputValue = this.input.getInputValue();
                    }}
                    onEndEditing={() => {
                        inputValue = this.input.getInputValue();
                    }}
                    onTextEmpty={() => {}}
                    onButtonClick={() => {
                        //根据需要自己控制
                        this.input.clearInputValue();
                        inputValue = "";
                    }}
                />
            </View>
        );
    }

    render() {
        return (
            <View style={styles.background}>
                <StatusBar
                    backgroundColor={global.homeColor}
                    networkActivityIndicatorVisible
                />

                {/*头部*/}
                <View style = {{flex:1}}>
                    {/*信号区*/}
                    <View
                        style={{ height: getHeaderPadding(), backgroundColor: "#ffffff" }}
                    />
                    {/*title*/}
                    <View style={styles.title}>
                        <TouchableOpacity
                            onPress={() => {
                                this.props.navigation.goBack();
                            }}
                            style={styles.back}
                        >
                            <Image source={back} />
                        </TouchableOpacity>
                        {this.renderHeaderView()}
                        <TouchableOpacity
                            onPress={() => {
                                inputValue = this.input.getInputValue();
                                if (!inputValue) {
                                    xnToast("搜索字段不能为空");
                                } else {
                                    NoDoublePress.onPress(()=>{
                                        if (this.input.getInputValue().replace(/\s/ig,'').length >10){
                                            xnToast("搜索字段不能超过10个字");
                                            return;
                                        }
                                        this.props.navigation.navigate("SearchResults", {
                                            inputTextV: inputValue
                                        });
                                    })
                                }
                            }}
                        >
                            <Text
                                style={{
                                    color: "rgba(0,0,0,0.65)",
                                    fontSize: 14,
                                    marginLeft:15/zoomW,
                                    marginRight:15/zoomW,
                                }}
                            >
                                搜索
                            </Text>
                        </TouchableOpacity>
                    </View>
                    <View style = {{height:height-3*getHeaderHeight(),width:'100%',justifyContent:'center',alignItems:'center'}}>
                     <Image source={ require("../../img/searchEmpty.png")}
                            resizeMode={'contain'}
                      style = {{width:width*0.5,height:width*0.5}}>
                     </Image>
                    </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: {
        fontSize: 14,
        flex: 1,
        color: "rgba(0,0,0,0.85)",
        height: 32 / zoomH,
        paddingLeft: 30,
        padding: 0,
        marginLeft: 15 / zoomW,
        display: "flex",
        backgroundColor: "#EDEDED",
        borderRadius: 4
    },
    tabStyle: {
        height: 34 / zoomH,
        backgroundColor: "#fff",
        elevation: 0,
        borderWidth: StyleSheet.hairlineWidth
    },
    tabBarLine: {
        width: 20 / zoomW,
        backgroundColor: "#FFFFFF",
        height: 0,
        borderRadius: 8,
        left: "24.5%",
        marginLeft: -(10 / zoomW)
    }
});