Reputation: 13
) I would like to create a list from an array using getParam (transfer data between screens). The end result should look like this:
Wiosła Deska Podciąganie
planList ``import React, {useState} from "react"; import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native'; import { globalStyles } from "../styles/global";
export default function PlanList({navigation}){
const [training, setTraining] = useState([
{ title: 'Trening pleców', body: ['wiosła', 'deska', 'podciaganie'], key: '1' },
{ title: 'Trening brzuch/uda/pośladki', body: ['odwodzenie', 'krab', 'martwy ciąg'], key: '2' },
{ title: 'Trening ręce+klatka', body: ['rozpiętki', 'przyciąganie do skroni', 'bicek'], key: '3' },
]);
return(
<View style={globalStyles.container}>
<Text>Ułóż swoje bloki treningowe</Text>
<Pressable><Text>Dodaj nowy</Text></Pressable>
<FlatList
data={training}
renderItem={({item}) => (
<TouchableOpacity style={globalStyles.trainingGrup} onPress={() => navigation.navigate('Training', item)}>
<Text>{item.title}</Text>
</TouchableOpacity>
)}
></FlatList>
</View>
)
}``
addTraining: ``import React from "react"; import { StyleSheet, View, Text, Image, FlatList } from "react-native"; import { globalStyles , images} from "../styles/global";
export default function Training({navigation}){ return( {navigation.getParam('body')} ) }``
Upvotes: 0
Views: 33
Reputation: 886
For Screen1 Where you are passing your data or detail.
import React, {useState} from "react";
import { Button, StyleSheet, Text, View, Pressable, FlatList, TouchableOpacity } from 'react-native';
import { globalStyles } from "../styles/global";
export default function PlanList({navigation}){
const training = [
{ title: 'Trening pleców', body: ['wiosła', 'deska', 'podciaganie'], key: '1' },
{ title: 'Trening brzuch/uda/pośladki', body: ['odwodzenie', 'krab', 'martwy ciąg'], key: '2' },
{ title: 'Trening ręce+klatka', body: ['rozpiętki', 'przyciąganie do skroni', 'bicek'], key: '3' },
]
return(
<View style={globalStyles.container}>
<Text>Ułóż swoje bloki treningowe</Text>
<Pressable><Text>Dodaj nowy</Text></Pressable>
<FlatList data={training} renderItem={({item}) => (
<TouchableOpacity style={globalStyles.trainingGrup} onPress={() => navigation.navigate('Training', item)}>
<Text>{item.title}</Text>
</TouchableOpacity>
)/>
</View>
)
}
For Screen2 where you are fatching your data using props.
import React,{useEffect} from "react";
import { StyleSheet, View, Text, Image, FlatList } from "react-native";
import { globalStyles , images} from "../styles/global";
export default function Training({navigation,route}){
var title=route.params.Training;
useEffect(()=>{
console.log(title);
alert(JSON.stringify(title))
},[])
return(
<View style={{flex:1}}>
<Text></Text>
</View>
)
}
I hope it will work
Upvotes: 0