Created
October 23, 2017 17:22
-
-
Save frknbasaran/57b3a0ba2be581a93683b48f7e401466 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* React */ | |
| import React, { Component } from 'react'; | |
| import { | |
| AppRegistry, | |
| StyleSheet, | |
| Text, | |
| View, | |
| Image, | |
| Dimensions, | |
| TextInput, | |
| ScrollView, | |
| ListView, | |
| TouchableOpacity, | |
| TouchableHighlight, | |
| Alert | |
| } from 'react-native'; | |
| import ProductCommentBox from '../components/Shared/ProductCommentBox'; | |
| import CommentSection from '../components/Sections/CommentSection'; | |
| /* Action Dispatches - Flux */ | |
| import {Actions} from 'react-native-router-flux'; | |
| /* Native Base */ | |
| import { Container, Content, Form, Item, Input, Header, Left, Right, Button, Body, Title, Tab, Tabs, TabHeading, Badge, Icon, StyleProvider} from 'native-base'; | |
| import getTheme from '../../node_modules/native-base/native-base-theme/components'; | |
| import platform from '../../node_modules/native-base/native-base-theme/variables/platform'; | |
| /* Linear Gradient */ | |
| import LinearGradient from 'react-native-linear-gradient'; | |
| /* Internal Components */ | |
| import SmallProductCard from '../components/Cards/SmallProductCard' | |
| import BigProductCard from '../components/Cards/BigProductCard' | |
| import GenericButton from '../components/Shared/GenericButton'; | |
| /* Axios Master */ | |
| import AxiosMaster from '../services/AxiosMaster'; | |
| /* Tab */ | |
| import Tabs2 from 'react-native-tabs'; | |
| /* Icons */ | |
| import { createIconSetFromFontello } from 'react-native-vector-icons'; | |
| import fontelloConfig from '../fonts/config.json'; | |
| const Icon2 = createIconSetFromFontello(fontelloConfig); | |
| import Swiper from 'react-native-swiper'; | |
| import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view'; | |
| const AxiosInstance = new AxiosMaster(); | |
| const moment = require('moment'); | |
| /* Dimension Calculator */ | |
| const swiperwidth = Dimensions.get('window').width; | |
| /* Generic Declerations */ | |
| const Tag = "ProductDetail: "; | |
| export default class ProductDetailScene extends Component{ | |
| constructor(props){ | |
| super(props); | |
| this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); | |
| this.state={ | |
| ProductData:props.ProductData, | |
| isNew:props.isNew, | |
| ProductDetail:{}, | |
| isLiked:false, | |
| basic: true, | |
| isOwner:false, | |
| listViewData: Array(20).fill('').map((_,i)=>`item #${i}`), | |
| page:"lol" | |
| } | |
| } | |
| /* Error Handling */ | |
| _onAPIError(){ | |
| } | |
| /* Button Callbacks */ | |
| _onLikeIconClick(){ | |
| if(this.state.isLiked){ | |
| this._unlikeProduct(); | |
| } | |
| else{ | |
| this._likeProduct(); | |
| } | |
| } | |
| _onSendMessageClick(){ | |
| console.log("%s Send Message Click" , Tag); | |
| if(this.state.ProductDetail){ | |
| Actions.MessagingScene({ProductDetail:this.state.ProductDetail}); | |
| } | |
| } | |
| _onAddToCartClick(){ | |
| console.log("%s Add To Cart Click" , Tag); | |
| AxiosInstance.addToCart(this.state.ProductData.id , (err,response)=>{ | |
| if(err){ | |
| console.log("%s On Cart Addition" , Tag , err); | |
| Alert.alert("Bu Ürün Zaten Sepete Ekli",null,[{text:"Tamam"}]); | |
| } | |
| else{ | |
| console.log("%s Cart Addition Success" , Tag , response); | |
| Alert.alert("Ürününüz Başarı İle Sepete Eklenmiştir",null,[{text:"Tamam"}]); | |
| //Actions.ExploreScene(); | |
| } | |
| }) | |
| } | |
| _onBackArrowClick(){ | |
| Actions.pop({refresh:{test:true}}); | |
| } | |
| _onCogClick(){ | |
| //TODO | |
| } | |
| /* Auxiliary - Profile */ | |
| _getProfileImage(){ | |
| if(this.state.ProductDetail.UserData){ | |
| return {uri: AxiosMaster.ImagePath + this.state.ProductDetail.UserData.ProfileData.ProfileImage}; | |
| } | |
| else{ | |
| return require('../img/pp.png'); | |
| } | |
| } | |
| _getProductImageURL(){ | |
| return AxiosMaster.ProductImagePath + this.state.ProductData.ProductImage; | |
| } | |
| _shouldRenderImage(){ | |
| if(this.state.ProductData.ProductImage){ | |
| return {uri: this._getProductImageURL()} | |
| } | |
| else{ | |
| return require('../img/canon.png'); | |
| } | |
| } | |
| _getProfileName(){ | |
| if(this.state.ProductDetail.UserData){ | |
| if (this.state.ProductDetail.UserData.BuyerData.isCommercial){ | |
| return this.state.ProductDetail.UserData.ProfileData.buyer.commercialRegistries.StoreName; | |
| } | |
| else{ | |
| return this.state.ProductDetail.UserData.ProfileData.FullName; | |
| } | |
| } | |
| else{ | |
| return "TaglistUser"; | |
| } | |
| } | |
| _getProvince(){ | |
| if(this.state.ProductDetail.UserData){ | |
| return this.state.ProductDetail.UserData.ProfileData.Province | |
| } | |
| else{ | |
| return "Taglist Province"; | |
| } | |
| } | |
| _getStars(){ | |
| if(this.state.ProductDetail.UserData){ | |
| return this.state.ProductDetail.UserData.ProfileData.Stars | |
| } | |
| else{ | |
| return "Taglist Province"; | |
| } | |
| } | |
| /* Auxiliary - Product */ | |
| _getProductName(){ | |
| return this.state.ProductData.Name; | |
| } | |
| _getProductPrice(){ | |
| return this.state.ProductData.Price; | |
| } | |
| _getOldProductPrice(){ | |
| return this.state.ProductData.Price; | |
| } | |
| _getProductViews(){ | |
| if(this.state.ProductDetail.ProductData){ | |
| return this.state.ProductDetail.ProductData.Views; | |
| } | |
| else{ | |
| return this.state.ProductData.Views; | |
| } | |
| } | |
| _getProductDescription(){ | |
| return this.state.ProductData.Description; | |
| } | |
| /* Auxiliary - Category */ | |
| _getCategoryName(){ | |
| if(this.state.ProductDetail.CategoryData){ | |
| return this.state.ProductDetail.CategoryData.Name; | |
| } | |
| else{ | |
| return "Taglist Category"; | |
| } | |
| } | |
| _getProductDate(){ | |
| var Publication = new Date(this.state.ProductData.Publication); | |
| return moment(Publication).format('DD.MM.YYYY'); | |
| } | |
| /* API Calls */ | |
| _likeProduct(){ | |
| var temp = this; | |
| AxiosInstance.likeProduct(this.state.ProductData.id , (err,response)=>{ | |
| if(err){ | |
| console.log(err); | |
| temp._onAPIError(); | |
| } | |
| else{ | |
| console.log("% Like Op Complete" , response); | |
| temp.setState({isLiked:true}); | |
| } | |
| }); | |
| } | |
| _unlikeProduct(){ | |
| var temp = this; | |
| AxiosInstance.unlikeProduct(this.state.ProductData.id , (err,response)=>{ | |
| if(err){ | |
| console.log(err); | |
| temp._onAPIError(); | |
| } | |
| else{ | |
| console.log("% unlike Op Complete" , response); | |
| temp.setState({isLiked:false}); | |
| } | |
| }); | |
| } | |
| _setIsOwner(){ | |
| if(this.state.ProductDetail.UserData.BuyerData.id == AxiosMaster.userData.userId){ | |
| this.setState({isOwner:true}); | |
| console.log("%s Owner Status TRUE" , Tag , this.state.isOwner); | |
| } | |
| else{ | |
| this.setState({isOwner:false}); | |
| console.log("%s Owner Status FALSE" , Tag , this.state.isOwner); | |
| } | |
| } | |
| /* API Calls */ | |
| _getProductDetail(){ | |
| var temp = this; | |
| AxiosInstance.getProductDetail(this.state.ProductData.id , (err,ProductDetail)=>{ | |
| console.log(ProductDetail); | |
| if(err || !ProductDetail){ | |
| temp._onAPIError(); | |
| } | |
| else{ | |
| console.log(ProductDetail); | |
| console.log("%s Received Product Detail" , Tag , ProductDetail); | |
| temp.setState({ProductDetail:ProductDetail,isLiked:ProductDetail.isLiked},()=>{ | |
| temp._setIsOwner(); | |
| }); | |
| } | |
| }); | |
| } | |
| _sendProductComment(Comment){ | |
| var temp = this; | |
| AxiosInstance.sendProductComment(this.state.ProductData.id,Comment,(err,Response)=>{ | |
| if(err){ | |
| console.log("%s Comment Send Operation Failure" , Tag , err); | |
| temp._onAPIError(); | |
| } | |
| else{ | |
| console.log("%s Successfuly Sent Comment" , Tag , Response); | |
| temp._getProductDetail(); | |
| } | |
| }); | |
| } | |
| _editProductComment(commentId, message) { | |
| var temp = this; | |
| AxiosInstance.editProductComment(commentId, message, (err, Response) => { | |
| if (err) { | |
| console.log("%s Comment Edit Operation Failure", Tag, err); | |
| temp._onAPIError(); | |
| } else { | |
| console.log("%s Successfuly Edit Comment", Tag, Response); | |
| temp._getProductDetail(); | |
| } | |
| }); | |
| } | |
| _replyProductComment(commentId, message) { | |
| var temp = this; | |
| AxiosInstance.replyToComment(commentId, message, (err, Response) => { | |
| if (err) { | |
| console.log("%s Comment Reply Operation Failure", Tag, err); | |
| temp._onAPIError(); | |
| } else { | |
| console.log("%s Successfuly Reply Comment", Tag, Response); | |
| temp._getProductDetail(); | |
| } | |
| }); | |
| } | |
| _getBasketItems(){ | |
| AxiosInstance.getCartItems((err,CartItems)=>{ | |
| if(err){ | |
| console.log("%s Error On Cart Retrieval", Tag); | |
| } | |
| else{ | |
| console.log("%s Successfuly Fetched Cart Data" , Tag , CartItems); | |
| this.setState({cartItems:CartItems}); | |
| } | |
| }); | |
| } | |
| /* Rendering - Likes */ | |
| _shouldRenderLikeIcon(){ | |
| if(this.state.isLiked){ | |
| if(this.state.isLiked){ | |
| return require('../img/heart2.png'); | |
| } | |
| else{ | |
| return require('../img/heart.png'); | |
| } | |
| } | |
| else{ | |
| return require('../img/heart.png'); | |
| } | |
| } | |
| /* LifeCycle Methods */ | |
| componentDidMount(){ | |
| if (this.state.isNew) { | |
| Alert.alert('Ürün onay bekliyor','Ürün henüz onaylanmadı.'); | |
| } | |
| } | |
| componentWillMount(){ | |
| this._getProductDetail(); | |
| this._getBasketItems(); | |
| } | |
| componentWillReceiveProps(){ | |
| this._getProductDetail(); | |
| } | |
| onEditClick(commentId,NewEdit){ | |
| console.log("%s onEdit Click For " + commentId , Tag , NewEdit); | |
| this._editProductComment(commentId,NewEdit); | |
| } | |
| onReplyClick(commentId,ReplyMessage){ | |
| console.log("%s Reply Click For " + commentId , Tag , ReplyMessage); | |
| this._replyProductComment(commentId,ReplyMessage); | |
| } | |
| onReportClick(commentId){ | |
| console.log("%s Report Click For " + commentId , Tag); | |
| var temp = this; | |
| AxiosInstance.reportComment(commentId , (err,response)=>{ | |
| if(err){ | |
| console.log("Failed TO Report Comment"); | |
| Alert.alert("Şikayet Et","Şikayetiniz Bize Ulaşırken Hata Oluştu Lütfen Sonra Tekrar Deneyiniz",[{text:"Tamam"}]); | |
| temp._onAPIError(); | |
| } | |
| else{ | |
| console.log("Successfuly Reported Comment"); | |
| Alert.alert("Şikayet Et", "Şikayetiniz Bize Başarıyla Ulaşmıştır.",[{text:"Tamam"}]); | |
| } | |
| }) | |
| } | |
| _getCartLength() { | |
| return this.state.cartItems.length; | |
| } | |
| onDealClick(commentId) { | |
| console.log("%s Deal Click For " + commentId, Tag); | |
| } | |
| /* Comment Action Callbacks */ | |
| onCommentSend(CommentText){ | |
| console.log("%s On Comment Send %s",Tag,CommentText); | |
| this._sendProductComment(CommentText); | |
| } | |
| _shouldrenderSendMessage(){ | |
| if(!this.state.isOwner){ | |
| return( | |
| <TouchableOpacity onPress={()=>{this._onSendMessageClick()}}> | |
| <View style={{marginRight:12,marginLeft:12, marginTop:10, marginBottom:10, paddingLeft:5, paddingTop:5, paddingBottom:5, paddingRight:5, borderColor:'#FD3957', borderRadius:5, borderWidth:1, opacity:1, alignItems:'center', justifyContent:'center' }}> | |
| <Text style={{color:'#FD3A57', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500'}}>Mesaj Gönder</Text> | |
| </View> | |
| </TouchableOpacity> | |
| ); | |
| } | |
| } | |
| _isOwner(){ | |
| if(this.state.isOwner){ | |
| return true; | |
| } | |
| else{ | |
| return false; | |
| } | |
| } | |
| _shouldRenderCommentBox(){ | |
| if(!this._isOwner()){ | |
| return ( | |
| <ProductCommentBox onSend={this.onCommentSend.bind(this)}/> | |
| ); | |
| } | |
| } | |
| _shouldRenderCommentSection(){ | |
| if(this.state.ProductDetail){ | |
| return( | |
| <CommentSection | |
| CommentData={this.state.ProductDetail.CommentData} | |
| ProductDetail={this.state.ProductDetail} | |
| UserId={AxiosMaster.userData.userId} | |
| isOwner={this.state.isOwner} | |
| EditHandler={this.onEditClick.bind(this)} | |
| ReplyHandler={this.onReplyClick.bind(this)} | |
| ReportHandler={this.onReportClick.bind(this)} | |
| DealHandler={this.onDealClick.bind(this)} | |
| /> | |
| ); | |
| } | |
| } | |
| _onProfilePress(){ | |
| Actions.ProfileScene({ | |
| targetId: this.state.ProductDetail.UserData.BuyerData.id, | |
| targetType: "Buyer" | |
| }); | |
| } | |
| _onDiscoverPress(){ | |
| Actions.ExploreScene(); | |
| } | |
| _onProfileTabPress(){ | |
| Actions.MyProfileScene(); | |
| } | |
| _onPlusClick(){ | |
| Actions.AddProductScene(); | |
| } | |
| render(){ | |
| const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); | |
| return( | |
| <StyleProvider style={getTheme(platform)}> | |
| <Container> | |
| <Header> | |
| <Left> | |
| <Button | |
| onPress={() => this._onBackArrowClick()} | |
| transparent> | |
| <Icon name='arrow-back'/> | |
| </Button> | |
| </Left> | |
| <Body> | |
| <Title>Detay</Title> | |
| </Body> | |
| <Right> | |
| <Button | |
| onPress={() => Actions.BasketScene()} | |
| transparent> | |
| <Icon2 style={{fontSize:22}} name='basket-icon'/> | |
| <Text style={styles.count}></Text> | |
| </Button> | |
| <Button transparent> | |
| <Icon2 style={{fontSize:22}} name='more'/> | |
| </Button> | |
| </Right> | |
| </Header> | |
| <Container style={{ | |
| flexDirection: 'column' | |
| }}> | |
| <Content style={{marginBottom:50}} contentContainerStyle={{flexWrap:'wrap', flexDirection:'row', alignItems:'flex-start'}}> | |
| <View style={{marginTop:-64, flexDirection:'column'}}> | |
| <Swiper showsButtons={false} height={swiperwidth}> | |
| <View style={styles.slide1}> | |
| <Image | |
| style={styles.image} | |
| source={this._shouldRenderImage()}> | |
| </Image> | |
| </View> | |
| <View style={styles.slide2}> | |
| <Image | |
| style={styles.image} | |
| source={this._shouldRenderImage()}> | |
| </Image> | |
| </View> | |
| <View style={styles.slide3}> | |
| <Image | |
| style={styles.image} | |
| source={this._shouldRenderImage()}> | |
| </Image> | |
| </View> | |
| <View style={styles.slide4}> | |
| <Image | |
| style={styles.image} | |
| source={this._shouldRenderImage()}> | |
| </Image> | |
| </View> | |
| </Swiper> | |
| <TouchableOpacity onPress={()=>this._onProfilePress()}> | |
| <View style={{flexDirection:'row'}}> | |
| <Image style={styles.pp} source={this._getProfileImage()}></Image> | |
| <View style={{flexDirection:'column'}}> | |
| <Text style={styles.persontitle}>{this._getProfileName()}</Text> | |
| <Text style={styles.personlocation}>{this._getProvince()}</Text> | |
| </View> | |
| <Right> | |
| <View style={{flexDirection:'row', paddingRight:15}}> | |
| <Image style={{height:14,width:15}} source={require('../img/profile_star.png')}/> | |
| <Text style={{marginLeft:4, color:'#9B9B9B', fontFamily:'Avenir',fontSize:14}}>{this._getStars()}</Text> | |
| </View> | |
| </Right> | |
| </View> | |
| </TouchableOpacity> | |
| {this._shouldrenderSendMessage()} | |
| <View style={{flexDirection:'column', height:82, borderColor:'#EFEFF4', borderBottomWidth:1, borderTopWidth:1, opacity:1, paddingTop:14}}> | |
| <View style={{flexDirection:'row'}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>{this._getProductName()}</Text> | |
| <Right><Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingRight:10}}>{this._getProductDate()}</Text></Right> | |
| </View> | |
| <Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingLeft:10}}>{this._getCategoryName()}</Text> | |
| <View style={{flexDirection:'row', paddingLeft:10}}> | |
| <Text style={styles.price}>{this._getProductPrice() + ' '} <Text style={styles.tl}>₺</Text> { (this._getOldProductPrice() !== this._getProductPrice()) ? <Text style={styles.falsePrice}>{this._getOldProductPrice() + ' '} <Text style={styles.tl}>₺</Text></Text> : null}</Text> | |
| <Right> | |
| <View style={{flexDirection:'row'}}> | |
| <Image source={require('../img/eye.png')} style={styles.eye}/> | |
| <Text style={{color:'#D1D1D1', opacity:1, fontFamily:'Avenir', fontSize:10, fontWeight:'400', paddingRight:10}}>{this._getProductViews()}</Text> | |
| <TouchableOpacity onPress={()=>this._onLikeIconClick()}> | |
| <Image source={this._shouldRenderLikeIcon()} style={styles.heart}/> | |
| </TouchableOpacity> | |
| </View> | |
| </Right> | |
| </View> | |
| </View> | |
| <Tabs locked={true}> | |
| <Tab heading={<TabHeading><Text>Ürün Detayları</Text></TabHeading>}> | |
| <Content style={{flexWrap:'wrap', flexDirection:'column'}}> | |
| <View style={{flexDirection:'column', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:14}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>Açıklama</Text> | |
| <Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10, paddingBottom:10, paddingRight:10, paddingTop:4}}>{this._getProductDescription()}</Text> | |
| </View> | |
| <View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Adet</Text> | |
| <Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>{(this.state.ProductData.Quantity) ? this.state.ProductData.Quantity : 1}</Text> | |
| </View> | |
| <View style={{flexDirection:'column', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:14, paddingBottom:10}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:17, fontWeight:'bold', paddingLeft:10}}>Özellikler</Text> | |
| <Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10, paddingRight:10, paddingTop:4}}>Belirtilmemiş</Text> | |
| </View> | |
| <View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Ödeme Bilgisi</Text> | |
| <Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>Kredi Kartına +9 Taksit İmkanı</Text> | |
| </View> | |
| <View style={{flexDirection:'row', borderColor:'#FD3957', borderColor:'#EFEFF4', borderBottomWidth:1, opacity:1, paddingTop:12, paddingBottom:10}}> | |
| <Text style={{color:'#4A4A4A', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'500', paddingLeft:10}}>Kargo Bilgisi</Text> | |
| <Text style={{color:'#9B9B9B', opacity:1, fontFamily:'Avenir', fontSize:14, fontWeight:'100', paddingLeft:10}}>Alıcı Öder</Text> | |
| </View> | |
| {(!this.state.isOwner) && | |
| <GenericButton full clickTrigger={this._onAddToCartClick.bind(this)} text={'SEPETE EKLE'} gradient colors={['#FD3957','#FE6B3F', '#FE982A']} starts ={{x: 0.0, y: 0.5}} ends={{x: 1.0, y: 0.5}} locations={[0,0.5,1.0]}> | |
| </GenericButton> | |
| } | |
| </Content> | |
| </Tab> | |
| <Tab tabStyle={styles.tabStyle} heading={ <TabHeading><Text>Yorumlar</Text></TabHeading>}> | |
| <View style={styles.container}> | |
| {this._shouldRenderCommentBox()} | |
| {this._shouldRenderCommentSection()} | |
| </View> | |
| </Tab> | |
| </Tabs> | |
| </View> | |
| </Content> | |
| <Tabs2 selected={this.state.page} style={{backgroundColor:'white',borderTopColor:'#B2B2B2', borderTopWidth:0.5}} selectedStyle={{color:'red'}} onSelect={el=>this.setState({page:el.props.name})}> | |
| <TouchableOpacity onPress={()=>this._onDiscoverPress()}> | |
| <View name="first" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}><Icon2 name="explore-icon" size={18} color="#D1D1D1" /> | |
| <Text style={{fontSize:10, color:'#D1D1D1'}}>Keşfet</Text> | |
| </View> | |
| </TouchableOpacity> | |
| <View name="second" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}><Icon2 name="live-icon" size={18} color="#D1D1D1"/> | |
| <Text style={{fontSize:10, color:'#D1D1D1'}}>Canlı Yayın</Text> | |
| </View> | |
| <TouchableOpacity onPress={() => this._onPlusClick()} name="third" style={{height:52, width:52, borderRadius:26, backgroundColor:'#171441',top:-8, position:'absolute',justifyContent:'center',alignItems:'center'}}> | |
| <Image style={{height:24,width:24}} source={require('../img/plus.png')}/> | |
| </TouchableOpacity> | |
| <TouchableOpacity onPress={()=>Actions.NotificationsMessagesScene()}> | |
| <View name="third" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red'}}> | |
| <Icon2 name="notification-icon" size={18} color="#D1D1D1"/> | |
| <Text style={{fontSize:10, color:'#D1D1D1'}}>Bildirimler</Text> | |
| </View> | |
| </TouchableOpacity> | |
| <TouchableOpacity onPress={()=> this._onProfileTabPress()}> | |
| <View name="fourth" style={{flexDirection:'column',justifyContent:'center',alignItems:'center'}} selectedIconStyle={{borderTopWidth:2,borderTopColor:'red', color:'black'}}> | |
| <Icon2 name="profile-icon" size={18} color="#D1D1D1"/> | |
| <Text style={{fontSize:10, color:'#D1D1D1'}} selectedIconStyle={{color:'red'}}>Profilim</Text> | |
| </View> | |
| </TouchableOpacity> | |
| </Tabs2> | |
| </Container> | |
| </Container> | |
| </StyleProvider> | |
| ); | |
| } | |
| } | |
| const styles = StyleSheet.create({ | |
| tabBarStyle:{ | |
| height:35, | |
| backgroundColor:'#ffffff', | |
| marginTop:10 | |
| }, | |
| tabStyle:{ | |
| height:35, | |
| backgroundColor:'#ffffff' | |
| }, | |
| slide1: { | |
| alignSelf: 'stretch', | |
| }, | |
| image: { | |
| height:swiperwidth, | |
| width:swiperwidth | |
| }, | |
| pp: { | |
| height:40, | |
| width:40, | |
| marginLeft:10, | |
| marginTop:10, | |
| marginRight:10, | |
| marginBottom:10, | |
| borderRadius:20 | |
| }, | |
| persontitle:{ | |
| color:'#4A4A4A', | |
| fontSize:15, | |
| fontFamily:'Avenir', | |
| fontWeight:'500', | |
| paddingTop:13 | |
| }, | |
| personlocation:{ | |
| color:'#9B9B9B', | |
| fontSize:13, | |
| fontFamily:'Avenir', | |
| fontWeight:'100', | |
| paddingTop:0 | |
| }, | |
| price: { | |
| fontFamily: 'Avenir', | |
| color: '#FD3A57', | |
| fontSize:16, | |
| fontWeight: 'bold' | |
| }, | |
| falsePrice: { | |
| marginLeft:20, | |
| fontFamily: 'Avenir', | |
| color: '#9B9B9B', | |
| fontSize:16, | |
| fontWeight: 'bold', | |
| textDecorationLine: 'line-through' | |
| }, | |
| tl:{ | |
| fontWeight: 'normal' | |
| }, | |
| eye:{ | |
| width:16, | |
| height:10, | |
| marginTop:2, | |
| marginRight:2 | |
| }, | |
| heart:{ | |
| width:18, | |
| height:16, | |
| marginRight:10 | |
| }, | |
| chevron:{ | |
| width:8, | |
| height:13, | |
| marginRight:10, | |
| }, | |
| buyerRowFront: { | |
| backgroundColor: '#ffffff', | |
| flex:1, | |
| borderBottomColor: '#CECED2', | |
| borderBottomWidth: 1, | |
| justifyContent: 'center', | |
| height: 64, | |
| }, | |
| buyerRowBack: { | |
| alignItems: 'center', | |
| padding: 15, | |
| backgroundColor: '#F8F8F8', | |
| flex: 1, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| paddingLeft: 15, | |
| }, | |
| sellerRowFront: { | |
| flex:1, | |
| backgroundColor: '#ffffff', | |
| borderBottomColor: '#CECED2', | |
| borderBottomWidth: 1, | |
| justifyContent: 'center', | |
| height: 49, | |
| }, | |
| sellerRowBack: { | |
| padding: 15, | |
| alignItems: 'center', | |
| backgroundColor: '#F8F8F8', | |
| flex: 1, | |
| flexDirection: 'row', | |
| justifyContent: 'space-between', | |
| paddingLeft: 15, | |
| }, | |
| backTextWhite: { | |
| color: '#FFF', | |
| fontFamily:'Avenir', | |
| fontSize:10, | |
| fontWeight:'500' | |
| }, | |
| backRightBtn: { | |
| alignItems: 'center', | |
| bottom: 0, | |
| justifyContent: 'center', | |
| position: 'absolute', | |
| top: 0, | |
| width: 75 | |
| }, | |
| backRightBtnLeft: { | |
| backgroundColor: '#4A4A4A', | |
| right: 75 | |
| }, | |
| backRightBtnRight: { | |
| backgroundColor: '#FE982A', | |
| right: 0 | |
| }, | |
| controls: { | |
| alignItems: 'center', | |
| marginBottom: 30 | |
| }, | |
| container: { | |
| backgroundColor: 'white', | |
| flex: 1 | |
| }, | |
| exclam: { | |
| width:23, | |
| height:23, | |
| marginTop:5, | |
| marginBottom:5 | |
| }, | |
| reply: { | |
| width:23, | |
| height:23, | |
| marginTop:5, | |
| marginBottom:5 | |
| }, | |
| edit: { | |
| width:26, | |
| height:26, | |
| marginTop:5, | |
| marginBottom:5 | |
| }, | |
| buyerpp:{ | |
| width:35, | |
| height:35, | |
| marginLeft:10 | |
| }, | |
| sellerpp:{ | |
| width:20, | |
| height:20, | |
| marginLeft:54 | |
| }, | |
| name: { | |
| fontFamily:'Avenir', | |
| fontSize:14, | |
| fontWeight:'400', | |
| color:'#D1D1D1' | |
| }, | |
| speech: { | |
| fontFamily:'Avenir', | |
| fontSize:14, | |
| fontWeight:'100', | |
| color:'#4A4A4A' | |
| }, | |
| time: { | |
| fontFamily:'Avenir', | |
| fontSize:11, | |
| fontWeight:'100', | |
| color:'#D1D1D1', | |
| marginRight:10 | |
| }, | |
| count: { | |
| position:'absolute', | |
| backgroundColor:'red', | |
| color:'white', | |
| fontWeight:'400', | |
| paddingLeft:3, | |
| paddingRight:3, | |
| marginLeft:35, | |
| fontSize:10, | |
| top:10, | |
| borderRadius:100 | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment