React native içinde işlevlerle dolu yardımcı dosya nasıl oluşturulur?

Benzer bir soru olmasına rağmen, birden fazla işlevi olan bir dosya oluşturamıyorum. RN çok hızlı geliştiği için yöntemin halihazırda modası geçmiş olup olmadığından emin değilim. React native'de global yardımcı işlev nasıl oluşturulur?

React Native'de yeniyim.

Yapmak istediğim şey, birçok yeniden kullanılabilir işlevle dolu bir js dosyası oluşturmak ve ardından onu bileşenlere içe aktarmak ve oradan çağırmak.

Şimdiye kadar yaptıklarım aptalca görünebilir ama bunu isteyeceğinizi biliyorum, işte buradalar.

Chandu sınıf adı oluşturmayı ve bunu şu şekilde dışa aktarmayı denedim

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

Ve sonra onu gerekli herhangi bir Bileşene aktarıyorum.

import Chandu from './chandu';

Ve sonra böyle çağır

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

İşe yarayan tek şey ilk console.log'du, bu da doğru yolu içe aktardığım anlamına gelir, ancak diğerlerini değil.

Bunu yapmanın doğru yolu nedir lütfen?

Hızlı not: Bir sınıfı içe aktarıyorsunuz, bunlar statik özellikler olmadıkça bir sınıftaki özellikleri çağıramazsınız. Dersler hakkında daha fazlasını buradan okuyun: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Yine de bunu yapmanın kolay bir yolu var. Yardımcı işlevler yapıyorsanız, bunun yerine aşağıdaki gibi işlevleri dışa aktaran bir dosya yapmalısınız:

export function HelloChandu() {

}

export function HelloTester() {

}

Ardından bunları şu şekilde içe aktarın:

import { HelloChandu } from './helpers'

veya...

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

Bir alternatif, nesnenin özellikleri olarak işlevlere sahip bir const nesnesine sahip olduğunuz bir yardımcı dosya oluşturmaktır. Bu şekilde yalnızca bir nesneyi dışa ve içe aktarırsınız.

helpers.js

const helpers = {
    helper1: function(){

    },
    helper2: function(param1){

    },
    helper3: function(param1, param2){

    }
}

export default helpers;

Ardından, şu şekilde içe aktarın:

import helpers from './helpers';

ve bunun gibi kullanın:

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

Bunun yardımcı olabileceğinden eminim. Dizinin herhangi bir yerinde fileA oluşturun ve tüm fonksiyonları dışa aktarın.

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 
}

Burada, React bileşen sınıfınızda, sadece bir import ifadesi yazabilirsiniz.

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;

İstediğinizi elde etmek ve dosyalarınız aracılığıyla daha iyi bir organizasyona sahip olmak için, yardımcı dosyalarınızı dışa aktarmak üzere bir index.js oluşturabilirsiniz.

Diyelim ki / helpers adında bir klasörünüz var . Bu klasörün içinde işlevlerinizi içeriğe, eylemlere veya beğendiğiniz herhangi bir şeye göre oluşturabilirsiniz.

Misal:

/* 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,
};

Tablolarda size yardımcı olacak işlevleri olan başka bir dosya oluşturalım:

/* 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,
};

Şimdi işin püf noktası, yardımcılar klasöründe bir index.js'ye sahip olmak :

/* 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,
};

Artık her işlevi kullanmak için ayrı ayrı içe aktarabilirsiniz:

import { Table, Utils } from 'helpers';

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

const myName = Utils.formatName(someNameVariable);

Dosyalarınızı daha iyi bir şekilde düzenlemenize yardımcı olabileceğini umuyoruz.

Ben onun adı Utils olan bir klasör oluşturmayı tercih ediyorum ve içinde size yardımcı olduğunuzu düşündüğünüzü içeren bir sayfa dizini oluşturmayı tercih ediyorum.

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}

Bunu kullanmanız gerektiğinde, varsayılan anahtar kelime görünümünü kullanmadığınız için "{}" kullanım olarak içe aktarılmalıdır.

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

Sınıfı kullanmak istiyorsanız, bunu yapabilirsiniz.

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