ChatTab.js 4.1 KB
import React, { Component } from 'react';
import { View, Text, StyleSheet,TouchableOpacity,Image, TextInput } from 'react-native';
import Search from '../../assets/search.svg'
import { ScrollView } from 'react-native-gesture-handler';
import ChatItem from '../ChatItem'
import Heart from '../../assets/heart_.svg'
import Chat from '../../assets/chat_.svg'
import Home from '../../assets/home.svg'
import QR from '../../assets/qr.svg'
import Alarm from '../../assets/alarm.svg'
export default class AddTab extends Component {
    static navigationOptions = {
        
        headerShown: false
        
    }
    state = {
        
        Keyword:"",
        item:[
            {
                title:"네네치킨 송도신도시점",
                Message: [
                    
                    "네 배달 부탁드"
                    
                ]
            },
            {
                title:"네네치킨 송도신시점",
                Message: [
                    
                    " 배달 부탁드립니다."
                    
                ]
            },
            {
                title:"네네치 송도신도시점",
                Message: [
                    
                    "네 배 부탁드립니다."
                    
                ]
            },
            {
                title:"네네킨 송도신",
                Message: [
                    
                    "네 배달 드립니다."
                    
                ]
            },
        ]
    }
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <View style={{height:"100%"}}>
                <View style={{width:"100%",flexDirection:"row",paddingTop:16,paddingBottom:16,paddingLeft:16,backgroundColor:"#615F5F"}}>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack(null)}>
                        <Image source={require('../../assets/back.png')}/>
                    </TouchableOpacity>
                    <Text style={{color:"white",fontSize:16,marginLeft:16}}>
                        채팅
                    </Text>
                </View>
                <View style={{marginLeft:16,marginRight:16,paddingTop:13,borderBottomColor:"#BCBCBD",borderBottomWidth:1,paddingBottom:5}}>
                    <View style={{flexDirection:"row"}}>
                        <Search style={{alignSelf:"center"}}/>
                        <TextInput value={this.state.Keyword} onChangeText={e => {
                            this.setState({Keyword:e})
                            } } style={{marginLeft:16}} placeholder="채팅방, 대화내용 검색"/>
                    </View>
                </View>
                <ScrollView style={{backgroundColor:"#979292"}}>
                    {this.state.item.map((e,i) => 
                    <View style={{paddingLeft:16,paddingRight:16,backgroundColor:"white"}}>
                        <ChatItem keyword={this.state.Keyword} item={e} navigation={this.props.navigation}/>
                    </View>)}
                </ScrollView>
            <View style={{
                shadowColor: "#000",
                shadowOffset: {
                    width: 0,
                    height: 6,
                },
                shadowOpacity: 0.39,
                shadowRadius: 8.30,
                elevation: 13,
                flexDirection:"row",
                bottom:0,
                justifyContent:"space-between",paddingLeft:24,paddingRight:24,paddingTop:19,paddingBottom:19,width:"100%",backgroundColor:"white"}}>
                <Home onPress={() => this.props.navigation.replace("Main_")}/>
                <Chat onPress={() => this.props.navigation.replace("ChatTab")}/>
                <QR onPress={() => this.props.navigation.replace("QRTab")}/>
                <Heart onPress={() => this.props.navigation.replace("LikeTab")}/>
                <Alarm onPress={() => this.props.navigation.replace("AlarmTab")}/>
            </View>
            </View>
        );
    }
}
 
const style = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});