web-dev-qa-db-fra.com

React Native - Transmission de données sur plusieurs écrans

J'ai des problèmes avec une application react-native. Je n'arrive pas à comprendre comment transmettre des données sur plusieurs écrans.

Je me rends compte qu'il y a d'autres questions similaires auxquelles on répond sur SO, mais les solutions n'ont pas fonctionné pour moi.

J'utilise la StackNavigator. Voici ma configuration dans mon fichier App.js.

export default SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Categories: { screen: CategoriesScreen }, // send from here
    Category: { screen: CategoryScreen }      // to here
});

J'ai un composant TouchableHighlight qui a un événement onPress qui permet de naviguer vers l'écran souhaité. Ceci est sur mon fichier/code Categories.js.

<TouchableHighlight onPress={(id) => {
    const { navigate } = this.props.navigation;
    navigate('Category', { category: id });
}}>
    <Text>{name}</Text>
</TouchableHighlight>

Lorsque je clique sur l'élément, l'écran bascule bien sur category, mais il ne parvient pas à envoyer les données props.

Ainsi, lorsque je vérifie les données dans mon écran Category, il retourne non défini. J'ai essayé les méthodes suivantes:

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

Comment puis-je accéder exactement aux données que j’ai transmises? La méthode navigate?

navigate('Category', { category: id });

Edit: Voici ma structure de code actuelle:

La data provient d'une API.

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.Push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(id) => {
                        const { navigate } = this.props.navigation;
                        navigate('Category', { params: { category: id } });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}
javascriptreactjsreact-nativestack-navigator
5
Lars Peterson

Votre problème n'envoie pas le paramètre. Vous l'envoyez bien et vous le lisez bien. Votre erreur est liée au fait que votre id est indéfinie.

Vous devriez corriger votre code comme ci-dessous,

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.Push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(event) => {
                        // onPress event fires with an event object
                        const { navigate } = this.props.navigation;
                        navigate('Category', { category: id });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

Et vous pouvez lire votre paramètre comme ci-dessous.

this.props.navigation.state.params.category
2
bennygenel

En examinant le problème décrit ci-dessus, je pense que vous recherchez quelque chose comme screenProps (documenté ici ).

Cela vous permet de transmettre un accessoire spécifique sur plusieurs écrans.

J'espère que ça aide. S'il vous plaît laissez-moi savoir si vous avez besoin de quelque chose d'autre.

0
Apurva jain

Depuis l'écran parent:

navigate({ routeName: 'Category',  params: { category: id } })

ou

navigate('Category', { category: id })

De l'écran enfant: 

const category = this.props.navigation.state.params.category

0
Alexander Vitanov