Tutorial App Newspaper – Laravel + React Native + API Part 1: Create a project, FlatList.

Primero debes ver el tutorial anterior para API con Laravel

React Native

Crear proyecto de react native / Create project

react-native init newspaper

Ejecutar npm / execute npm

react-native start

Antes de compilar en android debes crear un archivo local.properties en la carpeta de android y pegarlo el codigo para localizarlo el SDK
Before compiling on android you must create a local.properties file in the android folder and paste the code to locate the SDK

sdk.dir = /home/artyom/Android/Sdk/
ANDROID_HOME = /home/artyom/Android/Sdk/

Windows

sdk.dir=C\:\\Users\\Artyom\\AppData\\Local\\Android\\Sdk

Ejecutar en Android / Execute on Android

react-native run-android

Ejecutar en iOS

react-native run-ios

Crear una carpeta llamado src y crear un archivo index.js
Create a folder called src and create an index.js file

src/index.js

Import

import {
  Text,
  View,
  FlatList,
  Image,
  StyleSheet,
  Dimensions
} from 'react-native';

var {height, width} = Dimensions.get('window');
const baseUrl = "http://192.168.1.8/newspaper/public/"

state

  constructor(props)
  {
     super(props);
     this.state = {
       dataNews:[]
     }
  }

componentDidMount

  componentDidMount(){

    return fetch(baseUrl+"api/news")
    .then((response) => response.json())
    .then((responseJson) => {

      this.setState({
        isLoading: false,
        dataNews: responseJson,
      });

    })
    .catch((error) =>{
      console.error(error);
    })

  }

Render

  render() {
    return (
      <View style={{ flex: 1, backgroundColor:'#f8f8f8'}}>
        <View style={styles.headernews}>
          <Image style={styles.logonews} source={ require("./image/logo.png")} />
        </View>
        <FlatList
          data={this.state.dataNews.news}
          extraData={this.state}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }

_renderItem Flatlist

  _renderItem = ({item}) => (
    <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


const styles = StyleSheet.create({
  imagenew: {
    width: width/3,
    height: width/3,
    resizeMode: 'cover',
    borderRadius:5
  },
  divnews:{
    width:width-10,
    backgroundColor:'white',
    margin:5,
    flexDirection:'row',
    borderRadius:5
  },
  shadows:{
    elevation:4,
    shadowOpacity: 0.3,
    shadowRadius: 50,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
  },
  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',
  }
});

Crear una carpeta llamado image dentro de la carpeta src y pegarlo esta imagen.
Create a folder called image inside the src folder and paste this image.

Emulador

Resultados
PRÓXIMAMENTE

Código completo index.js

import React, { Component } from 'react';
import {
  Text,
  View,
  FlatList,
  Image,
  StyleSheet,
  Dimensions
} from 'react-native';

var {height, width} = Dimensions.get('window');
const baseUrl = "http://192.168.1.8/newspaper/public/"

export default class Examle extends Component {

  constructor(props)
  {
     super(props);
     this.state = {
       dataNews:[]
     }
  }

  componentDidMount(){
    return fetch(baseUrl+"api/news")
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataNews: responseJson,
      });
    })
    .catch((error) =>{
      console.error(error);
    })
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor:'#f8f8f8'}}>
        <View style={styles.headernews}>
          <Image style={styles.logonews} source={ require("./image/logo.png")} />
        </View>
        <FlatList
          data={this.state.dataNews.news}
          extraData={this.state}
          keyExtractor={this._keyExtractor}
          renderItem={this._renderItem}
        />
      </View>
    );
  }

  _renderItem = ({item}) => (
    <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
  },
  divnews:{
    width:width-10,
    backgroundColor:'white',
    margin:5,
    flexDirection:'row',
    borderRadius:5
  },
  shadows:{
    elevation:4,
    shadowOpacity: 0.3,
    shadowRadius: 50,
    shadowColor: 'gray',
    shadowOffset: { height: 0, width: 0 },
  },
  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',
  }
});

Añadir un comentario

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