Skip to content

Instantly share code, notes, and snippets.

@diaraujo13

diaraujo13/recentes.screen.js

Created April 29, 2017 16:14
Show Gist options
  • Save diaraujo13/e0c42e004563e6ba51d011b0478db89f to your computer and use it in GitHub Desktop.
Save diaraujo13/e0c42e004563e6ba51d011b0478db89f to your computer and use it in GitHub Desktop.
Download ZIP
react-native-community/react-native-tab-view error
Raw
recentes.screen.js
/* @flow */
import React, { Component } from 'react';
import {
ActivityIndicator,
Image,
ScrollView, Picker,
StyleSheet,
Text,
StatusBar,
TouchableOpacity, ListView, Dimensions,
View, TextInput, ToastAndroid,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { TabViewAnimated, TabBar } from 'react-native-tab-view';
import TarjaCard from '../components/tarjacard.component';
import PlatinumCard from '../components/platinum.component';
import Router from '../router';
const normalW = Dimensions.get('window').width;
const width = Dimensions.get('window').width/2-10;
export default class Recentes extends Component {
static route = {
navigationBar: {
elevation: 0,
backgroundColor: '#fff',
tintColor: '#000',
renderTitle: function(){
return (
<View style={{flex: 1, alignItems:'center', justifyContent:'center'}}>
<Image
style={{flex: 0, width: 81, marginLeft: -40, height: 33, resizeMode: 'stretch', }}
source={require('../images/logo.png')}></Image>
</View>
)
}
}
}
constructor(props, ki){
super(props, ki);
this.router = {
index: 0,
routes: [
{ key: '1', title: 'Feed' },
{ key: '2', title: 'CATEGORIAS' },
]
}
this.url = "http://144.217.161.117:4000/api/oferta/";
this.state = {
carregando: true,
carregandoLoading: false,
demandLoad: false,
posts: new ListView.DataSource({ rowHasChanged: (row1, row2) => row1.id !== row2.id }),
pageNumber: 1,
searchQuery: '',
qtdade: 0,
diaFilter: 'todos',
precoFilter: '0',
distFilter: '20000',
index: 1,
routes: [
{ key: '1', title: 'First' },
{ key: '2', title: 'Second' },
],
loaded: true
}
this.showNews = this.showNews.bind(this);
this.categories = this.categories.bind(this);
this.pushToCategory = this.pushToCategory.bind(this);
this._renderPost = this._renderPost.bind(this);
this._renderFooter = this._renderFooter.bind(this);
this._forwardPage = this._forwardPage.bind(this);
this._backwardPage = this._backwardPage.bind(this);
this._renderScene = this._renderScene.bind(this);
this._renderHeader = this._renderHeader.bind(this);
this._handleChangeTab = this._handleChangeTab.bind(this);
this.searchQuery = this.searchQuery.bind(this);
this.searchPage = this.searchPage.bind(this);
}
categories(){
this.props.navigation.performAction(({ tabs, stacks }) => {
tabs('main').jumpToTab('categories');
});
}
showNews(data){
this.props.navigation.getNavigator('initial').push(Router.getRoute('news', data));
}
pushToCategory(url){
this.props.navigator.push(Router.getRoute('lista', {
url,
diaFilter: this.state.diaFilter,
precoFilter: this.state.precoFilter,
distFilter: this.state.distFilter ,
initialPosition: this.props.route.params.initialPosition
}))
}
componentWillMount(){
this.loadPosts();
}
async loadPosts(){
await this.setState({
carregando:true,
carregandoLoading: true,
posts: this.state.posts.cloneWithRows([]),
qtdade: 0
});
fetch(this.url+this.state.pageNumber+`/${this.state.diaFilter}/${this.state.precoFilter}/${this.state.distFilter}/${this.props.route.params.initialPosition.latitude}/${this.props.route.params.initialPosition.longitude}`)
.then( res => res.json() )
.then( data => {
this.setState({
carregandoLoading: false,
posts: this.state.posts.cloneWithRows(data),
qtdade: data.length,
carregando: false });
})
}
_backwardPage(){
this.setState({pageNumber: --this.state.pageNumber});
this.loadPosts();
}
_forwardPage(){
this.setState({pageNumber: ++this.state.pageNumber});
this.loadPosts();
}
_onRefresh(){
this.setState({ count: 0 });
ToastAndroid.show('As notícias foram atualizadas', ToastAndroid.SHORT);
this.loadPosts();
}
_renderPost(post){ return <TarjaCard outerAction={this.showNews} input={post}></TarjaCard> }
_renderFooter(){
return (
<View style={{flex: 0, marginVertical: 26, flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
{ this.state.qtdade >14 ? (
<TouchableOpacity onPress={this._backwardPage} >
<View >
<Icon color="plus-circle" name="chevron-circle-left" size={43}></Icon>
</View>
</TouchableOpacity>
): null }
<TouchableOpacity
style={{marginLeft: 40}}
onPress={this._forwardPage}
>
<View >
<Icon color="tomato" name="chevron-circle-right" size={43}></Icon>
</View>
</TouchableOpacity>
</View>
)
}
_renderHeader(props) {
return <TabBar
style={{backgroundColor:'#000'}}
{...props} />;
}
_handleChangeTab(index){
this.setState({ index });
}
_renderScene({route}){
switch(route.key){
case '1':
return (
<ScrollView>
<View style={{backgroundColor:'#f8f8f8',
flexDirection:'row', flex: 0}}>
<Picker
style={{flex: 0, width: normalW/3-30}}
selectedValue={this.state.diaFilter}
onValueChange={(diaFilter) => {
this.setState({diaFilter});
this.loadPosts();
}}>
<Picker.Item label="Hoje" value="hoje" />
<Picker.Item label="Todos" value="todos" />
</Picker>
<Picker
style={{flex: 0, width: normalW/3+30}}
selectedValue={this.state.precoFilter}
onValueChange={(precoFilter) => {
this.setState({precoFilter});
this.loadPosts();
}}>
<Picker.Item label="Qualquer preço" value="0" />
<Picker.Item label="Do menor para maior" value="1" />
<Picker.Item label="Do maior preço para menor" value="-1" />
</Picker>
<Picker
style={{flex: 0, width: normalW/3}}
selectedValue={this.state.distFilter}
onValueChange={(distFilter) => {
this.setState({distFilter});
this.loadPosts();
}}>
<Picker.Item label="Até 5KM" value="5000" />
<Picker.Item label="Até 20KM" value="20000" />
<Picker.Item label="Até 40KM" value="40000" />
<Picker.Item label="Até 60KM" value="60000" />
<Picker.Item label="Até 80KM" value="80000" />
<Picker.Item label="Até 120KM" value="120000" />
</Picker>
</View>
{
this.state.qtdade == 0 ? (
<Text style={{alignSelf:'center', marginTop: 30,
fontWeight:'bold', fontSize: 23,
color: '#e8e8e8'}}>Nenhuma oferta encontrada</Text>
):(
<ListView
enableEmptySections={true}
removeClippedSubviews={false}
dataSource={this.state.posts}
renderRow={this._renderPost}
renderFooter={this._renderFooter} >
</ListView>
)
}
</ScrollView>
)
case '2':
return (
<ScrollView style={{flex: 1}}>
<View style={{flex: 1, flexDirection:'row', flexWrap:'wrap'}}>
<PlatinumCard outerAction={this.pushToCategory} icon="basket" title="Supermercados" slug="supermercados" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="broom" title="Móveis e decoração" slug="moveis" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="gas-station" title="Combustíveis" slug="combustiveis" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="food" title="Alimentação" slug="alimentos" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="responsive" title="Eletrônicos" slug="eletronicos" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="format-paint" title="Construção" slug="construcao" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="laptop" title="Informática" slug="informatica" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="paw" title="Cuidados Pet" slug="cuidados_pet" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="emoticon-cool" title="Beleza E Estética" slug="beleza_estetica" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="human" title="Moda Masculina" slug="moda_masculina" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="human-female" title="Moda Feminina" slug="moda_feminina" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="human-child" title="Moda Infantil" slug="moda_infantil" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="human" title="Calçados Masculinos" slug="calcados_masculino" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="human-female" title="Calçados Femininos" slug="calcados_feminino" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="baby-buggy" title="Calçados Infantis" slug="calcados_infantis" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="dumbbell" title="Esporte, Fitness E Lazer" slug="esportes" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="store-24-hour" title="Conveniências" slug="conveniencias" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="gift" title="Artigos festas" slug="artigos" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="keg" title="Perfumes" slug="perfumes" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="diamond" title="Relógios e Jóias" slug="relogios" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="home-variant" title="Casa e decoração" slug="casa" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="power-plug" title="Eletrodomésticos" slug="eletro" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="microphone-variant" title="Locação para eventos" slug="eventos" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="hospital" title="Farmácias e drogarias" slug="farmacia" width={width}></PlatinumCard>
<PlatinumCard outerAction={this.pushToCategory} icon="beach" title="Hospedagem e turismo" slug="hospedagem" width={width}></PlatinumCard>
</View>
</ScrollView>
)
default:
return (<View><Text>teste</Text></View>)
}
}
searchQuery(searchQuery){
this.setState({searchQuery: searchQuery})
}
searchPage(){
if (this.state.searchQuery == '')
alert("Preencha algum dado para pesquisar")
else if (this.state.searchQuery.length <= 3)
alert("O texto deve ter mais que 3 caracteres")
else{
this.props.navigator.push('lista', {
url: 'http://144.217.161.117:4000/api/oferta/search/'+this.state.searchQuery,
diaFilter: this.state.diaFilter,
precoFilter: this.state.precoFilter,
distFilter: this.state.distFilter
})}
}
onSelect(data) {
alert(data);
}
render() {
if (this.state.carregando){
return(
<View style={{flex: 1, backgroundColor:'#FFF', alignItems:'center', justifyContent:'center'}}>
<StatusBar
backgroundColor="#FFC300"
barStyle="light-content"
></StatusBar>
<ActivityIndicator style={{flex: 0}}
size='large' color="#ccc">
</ActivityIndicator>
</View>
)
}else{
return (
<View style={{flex: 1, flexDirection:'column'}}>
<StatusBar
backgroundColor="#FFC300"
barStyle="light-content"
></StatusBar>
<View style={{flex: 0, flexDirection:'row', justifyContent:'space-between', paddingVertical: 20, backgroundColor: '#FFC300'}}>
<TextInput style={{
flex: 1, backgroundColor: 'white',
marginLeft: 15, padding: 5,
fontSize: 12, borderRadius: 2,
paddingLeft: 20,
}}
underlineColorAndroid="transparent"
placeholder='Busque uma oferta'
placeholderTextColor='rgba(0,0,0,.38)'
onChangeText={this.searchQuery}
></TextInput>
<TouchableOpacity
onPress={this.searchPage}
style={{flex:0, paddingHorizontal: 10,
marginHorizontal: 10, borderWidth: 1, borderColor:'#FFF',
alignItems:'center', justifyContent:'center',
borderRadius: 4}}>
<View>
<Icon name="search" color={'#FFF'} size={20}></Icon>
</View>
</TouchableOpacity>
</View>
<TabViewAnimated
swipeEnabled={false}
style={styles.container}
navigationState={this.state}
renderScene={this._renderScene}
renderHeader={this._renderHeader}
onRequestChangeTab={this._handleChangeTab}
/>
</View>
)
}
} /* fim do render */
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
page: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment