Tutorial App Newspaper – Laravel + React Native + API Part 4: React Navigation.

Install into an existing project

npm install react-navigation
npm install react-navigation-stack
// other library
npm install react-native-gesture-handler
npm install react-native-reanimated
npm install react-native-screens

https://reactnavigation.org/en/

Route

Crear un archivo llamado Route.js en la carpeta src/Route.js

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import Main from "./index"
import Details from "./Details"

const AppNavigator = createStackNavigator({
    Home: Main,
    Details: Details,
  },
  {
    initialRouteName: 'Home',
  }
);

export default createAppContainer(AppNavigator);

Index.js

static navigationOptions = ({ navigation }) => {
  return {
      headerTitle: (
        <View   style={{ flex: 1,backgroundColor:'transparent',alignItems:'center' }}>
            <Image
            resizeMode="contain"
            style={{ width:width/3,height: '90%'  }}
            source={{uri: "https://www.tutofox.com/wp-content/uploads/2019/10/font_rend.png"}}
          />
        </View>),
      headerTitleStyle: {flex: 1, textAlign: 'center', justifyContent:'center'},
      headerStyle: { backgroundColor:"#f2f2f2" },
    };
  };

Agregar dentro del componente en el _renderItem

 <TouchableOpacity onPress={()=>this.props.navigation.navigate("Details",{"news":item})}>
//... component
</TouchableOpacity>

Details.js

Crear un archivo llamado Details.js en la carpeta src

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

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

export default class DetailsScreen extends React.Component {

  static navigationOptions = ({ navigation }) => {
    return {
        headerTitle: (<Image
        resizeMode="contain"
        style={{ width:width/3,height: '90%'  }}
        source={{uri: "https://www.tutofox.com/wp-content/uploads/2019/10/font_rend.png"}}
      />),
        headerStyle: { backgroundColor:"#f2f2f2" },
    };
  };

  render() {
    const data = this.props.navigation.getParam('news')
    return (
      <ScrollView>
        <View style={{ flex: 1}}>
          <Image style={{width:width,height:200}} source={{uri: baseUrl+"storage/"+data.image}} />
          <View style={{padding:10}}>
            <Text style={styles.textDate}>{data.created_at}</Text>
            <Text style={styles.textTitle}>{data.title}</Text>
            <Text style={styles.textTheme}>{data.name}</Text>
            <Text style={styles.textArticle}>{data.article}</Text>
          </View>
        </View>
      </ScrollView>
    );
  }
}


const styles = StyleSheet.create({
  textDate:{
    textAlign:'right'
  },
  textTitle:{
    fontSize:30,
    color:"#c2191c",
    fontWeight:"bold"
  },
  textTheme:{
    fontSize:24,
    fontWeight:"bold",
  },
  textArticle:{
    fontSize:20
  }


})

Añadir un comentario

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