[ReactJS]

Main.js

import React, { Component } from 'react';
import api from '../service/api';
import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';

export default class Main extends Component {
static navigationOptions = {
title: 'JSHunt',
};

state = {
lista: [],
};

componentDidMount() {
this.loadProducts();
}

loadProducts = async () => {
const response = await api.get("/tarefa/");
const { lista } = response.data;
this.setState({ lista });
};

renderItem = ({ item }) => (
<View style={styles.listaContainer}>
<Text style={styles.listaDescription}>{item}</Text>
<TouchableOpacity style={styles.listaButton} onPress={() => {
this.props.navigation.navigate("Tarefa", { tarefa: item});
}}>
<Text style={styles.textButton}>Acessar</Text>
</TouchableOpacity>
</View>
);

render() {
return (
<View style={styles.listaContainer}>
<FlatList
contentContainerStyle={styles.list}
data={this.state.lista}
keyExtractor={item =>item}
renderItem = {this.renderItem}
/>
</View>
);
}
}


Tarefa.js

import React from 'react';

import { Text} from 'react-native';

const Tarefa = ({navigation }) => {
console.log(navigation.state.params.tarefa);
return (
<Text>{navigation.state.params.tarefa}</Text>
);
};


export default Tarefa;


No main eu faço uma requisição para a API a qual me retorna uma lista, quando eu clico em um dos valores da lista ele vai para uma nova tela que que eh a da tarefa, e com esse valor eu preciso fazer uma nova requisição, seria tipo detalhe.

Só que não estou conseguindo fazer uma nova requisição só consigo mostrar o valor que deve ser chamado para nova requisição no "navigation.state.params.tarefa"

iria ficar por exemplo

http://localhost:8080/tarefa/navigation.state.params.tarefa


ou como aparece na tela

http://localhost:8080/tarefa/1

Continue reading...