search.js 3.1 KB
/**
 * Created by Cassie on 2018/05/14
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    TextInput,
    InteractionManager
} from 'react-native';

import {width,zoomW,zoomH} from '../../utils/getSize';
import {NoDoublePress} from '../../utils/utils';

const search = require('../../img/search.png');

export default class Search extends Component {
    static navigationOptions = ({ navigation, screenProps }) => ({
        title:null,
        headerStyle:{
            elevation:0, // 去掉阴影
            backgroundColor:'#efeff4',
            borderBottomWidth:0,
            height:(48/zoomH)
        },
        headerLeft:(<View style={styles.topSearch}>
            <View style={styles.searchBox}>
                <Image source={search} style={{width:(12/zoomW),height:(20/zoomH),marginRight:(6/zoomW)}} resizeMode="contain" />
                <TextInput returnKeyType="search" placeholder='搜索' placeholderTextColor='#8e8e93' underlineColorAndroid="transparent"  clearButtonMode="while-editing" style={{flex:1,fontSize:16,color:'#000',padding:0}} />
            </View>
            <TouchableOpacity onPress={navigation.state.params?navigation.state.params.back:null} style={{height:'100%',paddingLeft:(15/zoomW),display:'flex',justifyContent:'center'}}>
                <Text style={{fontSize:17,color:'#000'}}>取消</Text>
            </TouchableOpacity>
        </View>),
        headerRight:null
    });

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

    componentWillMount(){};

    componentDidMount(){
        this.props.navigation.setParams({
            back:()=>{
                NoDoublePress.onPress(() => {
                    InteractionManager.runAfterInteractions(() => {this.props.navigation.goBack();})
                })
            }
        });
    };

    componentWillUnmount(){
        this.setState = (state,callback)=>{
            return;
        };
    };

    render(){
        return(
            <View style={styles.background}>
                <View style={styles.resultTip}>
                    <Text style={{fontSize:14,color:'#666'}}>搜索结果</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    topSearch:{
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        width:width,
        backgroundColor:'#efeff4',
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    searchBox:{
        flex:1,
        height:(30/zoomH),
        backgroundColor:'#fff',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(6/zoomW),
        paddingRight:(6/zoomW),
        borderRadius:4
    },
    background:{
        flex:1,
        backgroundColor:'#fff'
    },
    resultTip:{
        width:'100%',
        height:(48/zoomH),
        borderBottomWidth:StyleSheet.hairlineWidth,
        borderBottomColor:'#ddd',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        paddingLeft:(15/zoomW)
    }
});