Tutorial App Newspaper – Laravel + React Native + API Part 2: Swiper.

Librería / Library

npm i --save react-native-swiper@nightly
npm install react-native-linear-gradient --save

State

dataBanner:[]

Agregar nueva variable en el componentDidMount

dataBanner:responseJson.banner

Import

import Swiper from "react-native-swiper"
import LinearGradient from 'react-native-linear-gradient';

Render

<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>

Styles

  textBanner:{
    fontSize:25,
    color:'white'
  },
  fondoBanner:{
    flex:2,
    justifyContent:"flex-end",
    padding:10
  },

Index.js

import React, { Component } from 'react';

import { Text,
  FlatList,
  Image,
  StyleSheet,
  Dimensions,
  View,
  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:[],
        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>
        <FlatList
          data={this.state.dataNews.news}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
          />
      </View>
    )
  }

  _renderItemTheme = ({item}) => (
    <View style={styles.divtheme}>
      <Text style={styles.textTheme}> {item.name} </Text>
    </View>
  )

  _renderItem = ({item}) => (
    <View style={[styles.divnews,styles.shadows]}>
      <Image style={styles.imagenew} source={{uri : baseUrl+"storage/"+item.image}} />
      <View style={{padding:8}}>
        <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:"#c2191c",
    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
  },
})

Añadir un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *