
State
Nueva variable para seleccionar de tema (Categorías)
selectTheme:0
Render
Agregar debajo de Banner y es un FlatList para temas
<View style={{height:45}}>
<FlatList
horizontal={true}
data={this.state.dataNews.theme}
keyExtractor={(item, index) => item.id}
renderItem={({item})=>this._renderItemTheme(item)}
/>
</View>
Reemplazar Flatlist de Noticias
<FlatList
data={this.state.dataNews.news}
keyExtractor={(item, index) => item.id}
renderItem={({item})=>this._renderItem(item)}
/>
renderItem Theme
_renderItemTheme = (item) => (
<TouchableOpacity onPress={()=>this.setState({selectTheme:item.id}) }>
<View style={this.state.selectTheme==item.id?styles.divtheme:styles.divtheme2}>
<Text style={this.state.selectTheme==item.id?styles.textTheme:styles.textTheme2}> {item.name} </Text>
</View>
</TouchableOpacity>
)
renderItem News
_renderItem(item){
if (this.state.selectTheme==item.theme||this.state.selectTheme==0) {
return(
<View style={[styles.divnews,styles.shadows]}>
<Image style={styles.imagenew} source={{uri : baseUrl+"storage/"+item.image}} />
<View style={{padding:5}}>
<Text style={styles.titleNews} numberOfLines={2}>{item.title}</Text>
<Text style={styles.themeNews}>{item.name}</Text>
<Text>{item.created_at}</Text>
</View>
</View>
)
}
}
Styles
divtheme:{
height:42,
borderTopWidth:3,
padding:10,
borderColor:'#c2191c',
backgroundColor:'white'
},
divtheme2:{
height:41,
borderBottomWidth:2,
borderColor:'#c2191c',
padding:10,
backgroundColor:'#343434'
},
textTheme:{
color:'black'
},
textTheme2:{
color:'white'
}
Código completo
import React, { Component } from 'react';
import { Text,
FlatList,
Image,
StyleSheet,
Dimensions,
View,
TouchableOpacity,
ImageBackground
} from 'react-native';
var {height, width } = Dimensions.get('window');
const baseUrl = "http://192.168.1.12/newspapers/public/"
import Swiper from "react-native-swiper"
import LinearGradient from "react-native-linear-gradient"
export default class App extends Component {
constructor(props)
{
super(props);
this.state = {
dataNews:[],
dataBanner:[],
selectTheme:0,
message:"Hola"
}
}
componentDidMount(){
return fetch(baseUrl+"api/news")
.then((response)=> response.json())
.then((responseJson)=>{
this.setState({
dataNews:responseJson,
dataBanner:responseJson.banner
})
})
.catch((error)=>{
console.log(error)
})
}
render(){
return(
<View style={{flex:1,backgroundColor:'#f8f8f8'}}>
<View style={styles.headernews}>
<Image style={styles.logonews} source={ { uri: "https://www.tutofox.com/wp-content/uploads/2019/10/font_rend.png"}} />
</View>
<View style={{height:200}}>
<Swiper>
{this.state.dataBanner.map((itemimag)=>{
return(
<ImageBackground style={{width:width,height:200}} source={{uri: baseUrl+"storage/"+itemimag.image }}>
<LinearGradient style={styles.fondoBanner} colors={[ 'transparent', 'black']} >
<Text style={styles.textBanner} numberOfLines={2}>{itemimag.title}</Text>
</LinearGradient>
</ImageBackground>
)
})}
</Swiper>
</View>
<View style={{height:45}}>
<FlatList
horizontal={true}
data={this.state.dataNews.theme}
keyExtractor={(item, index) => item.id}
renderItem={({item})=>this._renderItemTheme(item)}
/>
</View>
<FlatList
data={this.state.dataNews.news}
keyExtractor={(item, index) => item.id}
renderItem={({item})=>this._renderItem(item)}
/>
</View>
)
}
_renderItemTheme = (item) => (
<TouchableOpacity onPress={()=>this.setState({selectTheme:item.id}) }>
<View style={this.state.selectTheme==item.id?styles.divtheme:styles.divtheme2}>
<Text style={this.state.selectTheme==item.id?styles.textTheme:styles.textTheme2}> {item.name} </Text>
</View>
</TouchableOpacity>
)
_renderItem(item){
if (this.state.selectTheme==item.theme||this.state.selectTheme==0) {
return(
<View style={[styles.divnews,styles.shadows]}>
<Image style={styles.imagenew} source={{uri : baseUrl+"storage/"+item.image}} />
<View style={{padding:5}}>
<Text style={styles.titleNews} numberOfLines={2}>{item.title}</Text>
<Text style={styles.themeNews}>{item.name}</Text>
<Text>{item.created_at}</Text>
</View>
</View>
)
}
}
}
const styles = StyleSheet.create({
imagenew:{
width:width/3,
height:width/3,
resizeMode:'cover',
borderRadius:5
},
shadows:{
elevation:4,
shadowOpacity:0.3,
shadowRadius:50,
shadowColor:'gray',
shadowOffset: { height:0, width:0 }
},
divnews:{
width:width-10,
backgroundColor:'white',
margin:5,
flexDirection:'row',
borderRadius:5
},
titleNews:{
width:((width/3)*2)-20,
fontSize:22
},
themeNews:{
color:"#c2191c",
fontSize:20
},
headernews:{
width:width,
height:50,
backgroundColor:"#f8f8f8",
alignItems:'center',
justifyContent:'center'
},
logonews:{
height:45,
width:width/3,
resizeMode:'contain'
},
textBanner:{
fontSize:25,
color:'white'
},
fondoBanner:{
flex:2,
justifyContent:"flex-end",
padding:10
},
divtheme:{
height:42,
borderTopWidth:3,
padding:10,
borderColor:'#c2191c',
backgroundColor:'white'
},
divtheme2:{
height:41,
borderBottomWidth:2,
borderColor:'#c2191c',
padding:10,
backgroundColor:'#343434'
},
textTheme:{
color:'black'
},
textTheme2:{
color:'white'
}
})