Bonsoir,

Je suis dans un projet d'une application mobile en React Native. Je développe actuellement un écran contenant une liste de course.

Mon but est d'ouvrir une boite de dialogue permettant de demander à l'utilisateur la quantité acheté du produit.

J'ai un fichier dans lequel il y a le code pour la boite de dialogue que j'importe dans le fichier liste_course.js pour l'affichage de la liste de course.

Voici le code :

essai.js

import { StyleSheet, View } from "react-native";
import Dialog, { DialogFooter, DialogButton, DialogContent } from 'react-native-popup-dialog';

export function dialogue() {

    let state = {
        visible: false
    }

    return (
    <View style={styles.container}>
        <Dialog
            visible={state.visible}
            footer={
            <DialogFooter>
                <DialogButton
                    text="OK"
                    onPress={() => {}}
                />
            </DialogFooter>
            }
        >
        </Dialog>
    </View>
    )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

liste_course.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text, View, StyleSheet , Button, Alert, SafeAreaView } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { dialogue }  from './essai'

const tab_Course = [ 
    { id: "1", nom_produit: "Barre de Chocolat" }, 
    { id: "2", nom_produit: "Paquet de Lait" }, 
    { id: "3", nom_produit: "Shamppoing anti-pelliculaire" },
    { id: "4", nom_produit: "Sèche-Cheveux" },
    { id: "5", nom_produit: "Coca-cola" },
    { id: "6", nom_produit: "Jus de pomme" },
    { id: "7", nom_produit: "Biscuits" },
    { id: "8", nom_produit: "Produit Linge" },
    { id: "9", nom_produit: "Orange" }
]

class Liste_Course extends React.Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <Text>La liste de course</Text> 
                <FlatList data={tab_Course}
                keyExtractor={(item) => item.id} 
                renderItem={({item}) => <Text style={{ fontSize : 30 }}>{item.nom_produit}<Button style={styles.button} title="🛒" onPress={dialogue()}/></Text>}/>
                <StatusBar style="auto" />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({ 
    container: { 
        flex: 1, 
        paddingTop: 77, 
        alignItems: "center",
    },
    button : {
        flex: 1,
        color: "white",
        justifyContent: "space-between"
    }
})

export default Liste_Course

Mais rien s'affiche je ne sais pas pourquoi. Je suis qu'un débutant en React Native. Une aide est le bienvenue et utile pour mon apprentissage.

Je vous remercie :).

1 réponse


Hello, j'y connais rien en react native, mais si ca ressemble à react js, je dirais qu'a aucun moment tu ne change le state de dialog dans ta list de course du coup ton visible reste à false.

Si c'est comme en react js et de ce que je vois tu n'utilises pas redux, du coup ta 2 solutions
Soit tu créer un context avec t'es valeurs de départ et un seteur pour changer ta valeur pour l'ouverture du dialog
Soit tu passe en props ton state de dialog à liste_course pour pouvoir le modifier

et la ici onPress={dialogue()}, de ce que je comprends mais c'est peut être différent en native, mais t'éssaie d'executer un composant