0
votes

Comment ouvrir l'écran avec cliquez sur l'élément dans la liste de plis dans la réaction de Native?

Je veux ouvrir l'écran lorsque j'appuie l'un de ces éléments (images). J'ai besoin d'ouvrir l'écran du joueur dans mon application. Il doit donc être un écran différent pour chaque élément. Y a-t-il un moyen de faire ça? Aidez-moi, s'il vous plaît. Je ne trouve aucune solution sur Google. Voici mon code:
Voici mes articles plates (images): xxx

Flatlist: xxx

javascript reactjs react-native

0 commentaires

3 Réponses :

0
votes

2 choses. Tout d'abord, vous voulez très rarement utiliser TouchableWithOutFeedBack. Les utilisateurs attendent des commentaires lorsqu'ils touchent quelque chose qu'ils peuvent interagir, tels qu'un bouton.

Si vous êtes sûr à 100%, vous voulez que ce soit sans retour, mais je pense que vous voudrez probablement toucher à la place. P>

La deuxième chose est que vous êtes presque là. Vous devez ajouter un ONPRERS code> PROP sur votre étiquette tactile. Vous voudrez mettre à jour votre source de données afin que chaque élément ' élément code>' contient les informations nécessaires pour pouvoir naviguer à votre bon écran. Il peut être aussi simple que d'inclure une autre variable nommée ' scénaphique code>' ou similaire, ou vous pouvez obtenir aussi compliqué que l'ajout d'une fonction complète que vous passez dans votre code> manutention d'événement code> . De toute façon, vous connaissez votre code mieux que moi, mais il vous suffit d'ajouter quelques données à votre Catégories CODE> Array. P>

EDIT: Voici un exemple utilisant l'approche ScreenName mentionnée ci-dessus. P>

    <TouchableOpacity
       onPress={() => {
          // navigate to screen named item.screenName
       }}
    >

13 commentaires

Pouvez-vous modifier mon code parce que je suis nouveau chez React Native, alors je ne suis pas sûr de vous comprendre?

Merci ... m'a beaucoup aidé

Si votre question est répondue, sélectionnez ma réponse.

J'ai toujours un problème. J'ai fait tout comme vous l'avez dit, mais quand j'exécute une application sur iOS Expo, je ne peux pas ouvrir l'écran avec presse. Je n'ai pas d'erreurs mais je ne peux pas ouvrir l'écran.

Désolé, la vie a été folle ces derniers temps. On dirait que votre code est presque là-bas, il vous suffit d'appeler votre fonction de navigation pour naviguer vers l'écran Vous stockez.

Le problème est que je dois convertir la classe en fonction, mais je ne sais pas comment faire cela.

Je l'ai posté ici comme réponse, car c'est une solution pour le premier problème, mais doit encore être changé.

Si ma réponse vous a aidé à répondre à votre question initiale, vous devez sélectionner ma réponse comme réponse. Deuxièmement, si vous avez un nouveau problème, vous devriez vraiment poster cela comme un nouveau problème. Voyant comme vous êtes nouveau, je vais y regarder ici, mais ma question est de ... pourquoi doit-elle être une fonction et non une classe?

Selon les règles des crochets, il doit être une fonction. Je suis nouveau chez React Native, donc je ne suis pas sûr, mais je le lis sur ce site: réactjs. org / docs / hameçons-règles.html

Je l'ai posté comme nouveau problème, mais personne ne me donne une bonne solution. Je t'ai vu être bon à cela, alors je vous ai demandé ici

Je l'ai corrigé. Merci pour votre temps de toute façon.

La réponse sur votre autre question est correcte, en cas que vous ne l'avez pas encore vu.

Oui, j'ai vu ça.

0
votes

Voici la mise à jour du code.

Articles platList: P>

<TouchableOpacity onPress={() => item.screenName}}>

0 commentaires

0
votes

Voici une solution de ce problème, mais ne fonctionne toujours pas, car la classe doit être convertie en fonction.

Voici mon écran de composant. Voici la classe mais je veux convertir cela en fonction de la fonction ... p>

Voici ce composant de classe que je veux convertir en fonction de la fonction: p> xxx pré>

voici Articles plat: P>

        return (
            <View style={styles.container}>
                <FlatList
                    data={categories}
                    showsHorizontalScrollIndicator={false}
                    numColumns={categories.length / 5}
                    showsVerticalScrollIndicator={false}
                    renderItem = {({item, index}) => {
                        return (
                        <TouchableOpacity 
                            onPress={() => this.redirectTo(item.screenName)}>
                        </TouchableOpacity>
                        );
                    }}
                />
            </View>
            
        );    
    }
}

0 commentaires