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:

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)
Mon console.log m'affiche exactement ce que je demande.

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
Code : Sélectionner tout - Visualiser dans une fenêtre à part
export function ListFieldsModal({style, id, name, dataset}:Props){
je dois ajouter le dataset pour que je puisse le récuper.

Par contre, dans mon component, je pense que je dois déclarer le tyage et j'ai essayé 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,
    }[]
}
Le problème que j'ai est que ceci

Code dataset : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 console.log("Dataset 2:")
    console.log(dataset)
et
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