¿Cómo crear un archivo auxiliar lleno de funciones en react native?

Aunque hay una pregunta similar, no puedo crear un archivo con múltiples funciones. No estoy seguro si el método ya está desactualizado o si RN está evolucionando muy rápido. ¿Cómo crear una función de ayuda global en react native?

Soy nuevo en React Native.

Lo que quiero hacer es crear un archivo js lleno de muchas funciones reutilizables y luego importarlo en componentes y llamarlo desde allí.

Lo que he estado haciendo hasta ahora puede parecer estúpido, pero sé que lo pedirás, así que aquí están.

Intenté crear un nombre de clase Chandu y exportarlo así

'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');
  }
}

Y luego lo importo en cualquier componente requerido.

import Chandu from './chandu';

Y luego llámalo así

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

Lo único que funcionó fue el primer console.log, lo que significa que estoy importando la ruta correcta, pero no ninguna otra.

¿Cuál es la forma correcta de hacer esto, por favor?

Nota rápida: está importando una clase, no puede llamar propiedades en una clase a menos que sean propiedades estáticas. Lea más sobre las clases aquí: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Sin embargo, hay una manera fácil de hacer esto. Si está haciendo funciones auxiliares, debería crear un archivo que exporte funciones como esta:

export function HelloChandu() {

}

export function HelloTester() {

}

Luego impórtelos así:

import { HelloChandu } from './helpers'

o...

import functions from './helpers' luego functions.HelloChandu

Una alternativa es crear un archivo auxiliar donde tenga un objeto constante con funciones como propiedades del objeto. De esta manera solo exporta e importa un objeto.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Luego, importe de esta manera:

import helpers from './helpers';

y usar así:

helpers.helper1();
helpers.helper2('value1');
helpers.helper3('value1', 'value2');

Estoy seguro de que esto puede ayudar. Cree el archivo A en cualquier lugar del directorio y exporte todas las funciones.

export const func1=()=>{
    // do stuff
}
export const func2=()=>{
    // do stuff 
}
export const func3=()=>{
    // do stuff 
}
export const func4=()=>{
    // do stuff 
}
export const func5=()=>{
    // do stuff 
}

Aquí, en su clase de componente React, simplemente puede escribir una declaración de importación.

import React from 'react';
import {func1,func2,func3} from 'path_to_fileA';

class HtmlComponents extends React.Component {
    constructor(props){
        super(props);
        this.rippleClickFunction=this.rippleClickFunction.bind(this);
    }
    rippleClickFunction(){
        //do stuff. 
        // foo==bar
        func1(data);
        func2(data)
    }
   render() {
      return (
         <article>
             <h1>React Components</h1>
             <RippleButton onClick={this.rippleClickFunction}/>
         </article>
      );
   }
}

export default HtmlComponents;

Para lograr lo que desea y tener una mejor organización a través de sus archivos, puede crear un index.js para exportar sus archivos auxiliares.

Digamos que tiene una carpeta llamada / helpers . Dentro de esta carpeta puede crear sus funciones divididas por contenido, acciones o cualquier cosa que desee.

Ejemplo:

/* Utils.js */
/* This file contains functions you can use anywhere in your application */

function formatName(label) {
   // your logic
}

function formatDate(date) {
   // your logic
}

// Now you have to export each function you want
export {
   formatName,
   formatDate,
};

Creemos otro archivo que tenga funciones para ayudarlo con las tablas:

/* Table.js */
/* Table file contains functions to help you when working with tables */

function getColumnsFromData(data) {
   // your logic
}

function formatCell(data) {
   // your logic
}

// Export each function
export {
   getColumnsFromData,
   formatCell,
};

Ahora el truco es tener un index.js dentro de la carpeta de ayudantes :

/* Index.js */
/* Inside this file you will import your other helper files */

// Import each file using the * notation
// This will import automatically every function exported by these files
import * as Utils from './Utils.js';
import * as Table from './Table.js';

// Export again
export {
   Utils,
   Table,
};

Ahora puede importar por separado para usar cada función:

import { Table, Utils } from 'helpers';

const columns = Table.getColumnsFromData(data);
Table.formatCell(cell);

const myName = Utils.formatName(someNameVariable);

Espero que pueda ayudar a organizar sus archivos de una mejor manera.

prefiero crear una carpeta, su nombre es Utils y crear un índice de página que contenga lo que crees que es tu ayudante

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}

Cuando necesite usar esto, se debe importar como uso "{}" porque no usó la apariencia de palabra clave predeterminada

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

Si quieres usar la clase, puedes hacerlo.

Helper.js

  function x(){}

  function y(){}

  export default class Helper{

    static x(){ x(); }

    static y(){ y(); }

  }

App.js

import Helper from 'helper.js';

/****/

Helper.x