Bonjour à tous
je crée une App avec React Native / Type script.
Sur ma page principale, je collect des informations sur des terrains ou sont installés des sations.
Je le fait ainsi:
Mon console.log m'affiche exactement ce que je demande.
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 type Fields = { index: number, id_field: number, field_name: string, field_longname: string, } const fields:Fields[] = [] data?.fields.map((field, index) =>{ fields.push({ index: index, id_field: field.id_field, field_name: field.field_name, field_longname: field.field_longname }) }) console.log("Fields") console.log(fields)
J'ai aussi créé un components qui va afficher le résultats dans un modal
Sur ma page principale je fais appel à ce component ListFieldsModal et je dois passer mon tableau 'fields' pour que le component ListFieldsModal parcours le tableau et affiche les résultats
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10 useEffect(() => { navigation.setOptions({ headerRight: () => ( <ListFieldsModal id={1} name={"dd"} dataset={fields}/> ) }); console.log("Effet") }, []);
J'arrive récupérer l'id (number) et le name (string), mais par contre, je ne sais pas comment passer un tableau. Voic en bas mon component au complet
Ici
je dois ajouter le dataset pour que je puisse le récuper.
Code : Sélectionner tout - Visualiser dans une fenêtre à part export function ListFieldsModal({style, id, name, dataset}:Props){
Par contre, dans mon component, je pense que je dois déclarer le tyage et j'ai essayé ceci
Le problème que j'ai est que ceci
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 type Props = { style?: ViewStyle, id: number, name: string, dataset: { }[] } type Props = { style?: ViewStyle, id: number, name: string, dataset: { index: number, id_field: number, field_name: string, field_longname: string, }[] }
et
Code dataset : Sélectionner tout - Visualiser dans une fenêtre à part
1
2 console.log("Dataset 2:") console.log(dataset)
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 <Row> {dataset?.map((f, index) => ( f.field_longname ))} </Row>
n'affuchent rien. J'ai l'impression que la valeur de 'fields' n'est pas passé dans dataset.
Est.ce que c'est un problème de déclaration ou de typage?
Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113 import { Image ,ViewStyle, StyleSheet, Pressable, View, Text, Modal, Dimensions} from "react-native" import { ThemedText } from "./ThemedText" import { useThemeColors } from "@/hooks/useThemeColors"; import { Link } from "expo-router"; import { Shadows } from "@/constants/shadows"; import { Row } from "./Row"; import { useRef, useState } from "react"; import FontAwesome from '@expo/vector-icons/FontAwesome6'; type Props = { style?: ViewStyle, id: number, name: string, dataset: { index: number, id_field: number, field_name: string, field_longname: string, }[] } export function ListFieldsModal({style, id, name, dataset}:Props){ const colors = useThemeColors() const [isModalVisible, setModalVisibility] = useState(false) const buttonRef = useRef<View>(null) const [position, setPosition] = useState<null | { top: number, right: number }>(null) const onButtonPress = () => { buttonRef.current?.measureInWindow((x, y, width, height) => { setPosition({ top: y + height + 5, right: Dimensions.get("window").width - x - width + 5 }) setModalVisibility(true); }) } const onClose = () => { setModalVisibility(false); } console.log("Dataset 2:") console.log(dataset) return ( <> <Pressable onPress={onButtonPress} > <View ref={buttonRef} style={[styles.button, {backgroundColor: colors.white}]} > <FontAwesome name="map" size={20} color="gray" /> </View> </Pressable> <Modal animationType="fade" transparent visible={isModalVisible} onRequestClose={onClose} > <Pressable style={styles.backdrop} onPress={onClose} /> <View style={[styles.popup, {backgroundColor: colors.white, ...position}]}> <Row> <Link style={styles.row} href={{pathname: "/station/[id]", params: {id:id}}} asChild> <Pressable android_ripple={{color: colors.tint, foreground: true}} style={style}> <ThemedText variant="body" color="black">{name}</ThemedText> </Pressable> </Link> </Row> <Row> {dataset?.map((f, index) => ( f.field_longname ))} </Row> </View> </Modal> </> ) } const styles = StyleSheet.create({ row: { }, button:{ width: 30, height: 30, borderRadius: 25, flex:1, alignItems: 'center', justifyContent: 'center' }, backdrop: { flex:1, backgroundColor: "rgba(240, 235, 235, 0.4)" }, popup: { position: 'absolute', padding: 10, paddingTop: 16, gap: 16, borderRadius: 12, }, });
Merci pour vos lumières
Partager