Comment créer un fichier d'aide rempli de fonctions en react native ?

Question

Bien qu'il y ait une question similaire, je ne parviens pas à créer un fichier avec plusieurs fonctions. Je ne sais pas si la méthode est déjà dépassée ou non car RN évolue très vite. Comment créer une fonction d'aide globale dans react native ?

Je suis novice en matière de React Native.

Ce que je veux faire, c'est créer un fichier js rempli de nombreuses fonctions réutilisables, puis l'importer dans des composants et l'appeler à partir de là.

Ce que j'ai fait jusqu'à présent peut sembler stupide, mais je sais que vous allez me le demander, alors voilà.

J'ai essayé de créer une classe nommée Chandu et de l'exporter comme ceci

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  TextInput,
  View
} from 'react-native';

export default class Chandu extends Component {

  constructor(props){
    super(props);
    this.papoy = {
      a : 'aaa'
    },
    this.helloBandu = function(){
      console.log('Hello Bandu');
    },
  }

  helloChandu(){
    console.log('Hello Chandu');
  }
}

Et ensuite je l'importe dans n'importe quel composant requis.

import Chandu from './chandu';

Et ensuite l'appeler comme ceci

console.log(Chandu);
console.log(Chandu.helloChandu);
console.log(Chandu.helloBandu);
console.log(Chandu.papoy);

La seule chose qui a fonctionné est le premier console.log, ce qui signifie que j'importe le bon chemin, mais pas les autres.

Quelle est la manière correcte de procéder, s'il vous plaît ?

Answer 1

Je préfère créer un dossier dont le nom est Utils et à l'intérieur créer une page index qui contient ce que vous pensez être utile.

const findByAttr = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

const FUNCTION_NAME = (component,attr) => {
    const wrapper=component.find(`[data-test='${attr}']`);
    return wrapper;
}

export {findByAttr, FUNCTION_NAME}

Lorsque vous aurez besoin de l'utiliser, il sera importé sous la forme "{}", car vous n'avez pas utilisé le mot-clé "look" par défaut.

 import {FUNCTION_NAME,findByAttr} from'.whare file is store/utils/index'

Answer 2

Créez un fichier avec le nom par exemple Utils.js et utilisez export avec toutes les fonctions.

export function firstFunction(){
}

export function secondFunction(){
}

Il existe maintenant deux façons d'importer et d'utiliser ces fonctions.

1. les importer séparément en tant que

   import {firstFunction, secondFunction} from './Utils'

et les utiliser comme

firstFunction()
secondFunction()

2. les importer en donnant un nom générique comme

   import * as Utils from './Utils'

et les utiliser comme

Utils.firstFunction()
Utils.secondFunction()