1
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>
);
}
}
Task.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;
In the main I make a request for the API which returns me a list, when I click on one of the values of the list it goes to a new screen that is the task, and with this value I need to make a new request, it would be kind of detail.
Only that I am not able to make a new request only I can show the value that should be called for new request in "navigation.state.params.task"
would stay for example
http://localhost:8080/tarefa/navigation.state.params.tarefa
or as it appears on the screen
http://localhost:8080/tarefa/1