Come creare un file di supporto pieno di funzioni in risposta nativo?

Question

Anche se esiste una domanda simile, non riesco a creare un file con più funzioni. Non sono sicuro che il metodo sia già obsoleto o meno, dal momento che RN si sta evolvendo molto velocemente. How to create global helper function in react native?

Sono nuovo di React Native.

Quello che voglio fare è creare un file js pieno di molte funzioni riutilizzabili e quindi importarlo nei componenti e chiamarlo da lì.

Quello che ho fatto finora potrebbe sembrare stupido ma so che lo chiederete così eccoli qui.

Ho cercato di creare un nome di classe Chandu ed esportarlo come questo

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

E poi importarlo in qualsiasi necessaria componente.

import Chandu from './chandu'; 

e quindi chiamare in questo modo

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

L'unica cosa che ha funzionato è stato il primo console.log, il che significa che sto importando il percorso corretto, ma non tutti gli altri.

Qual è il modo corretto di farlo per favore?

Answer 1

Nota rapida: si sta importando una classe, non è possibile chiamare proprietà su una classe a meno che non siano proprietà statiche. Maggiori informazioni sulle classi qui: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

C'è un modo semplice per farlo, però. Se si stanno facendo funzioni di aiuto, si dovrebbe invece fare un file che esporta le funzioni in questo modo:

export function HelloChandu() { 

} 

export function HelloTester() { 

} 

quindi importarli in questo modo:

import { HelloChandu } from './helpers'

Answer 2

Sono sicuro che questo può aiutare. Crea fileA in qualsiasi punto della directory ed esporta tutte le funzioni.

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 
} 

Qui, nella classe del componente React, è possibile scrivere semplicemente una dichiarazione di importazione.

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;