反応したネイティブの関数でいっぱいのヘルパーファイルを作成するには？

Question

同様の質問がありますが、私は複数の機能を持つファイルを作成できません。 RNが非常に速く進化しているため、メソッドが既に古くなっているかどうかはわかりません。 How to create global helper function in react native?

「React Native」を初めて使用しています。

私がやりたいことは、多くの再利用可能な関数でいっぱいのjsファイルを作成し、それをコンポーネントでインポートし、そこから呼び出すことです。

私がこれまで行ってきたことは、馬鹿に見えるかもしれませんが、あなたがここでそれを求めてくれることを知っています。

私はクラス名Chanduを作成しようと、この

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

のようにそれをエクスポートして、私は必要なすべてのコンポーネントで、それをインポートします。その後、

import Chandu from './chandu'; 

そして働いていた唯一の事は、私は他のものを正しいパスをインポートしますが、いないよということを意味最初にconsole.log、だったこの

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

のようにそれを呼び出します。

これを行う正しい方法は何ですか？

Answer 1

クイックメモ：クラスをインポートしていて、静的プロパティでない限り、クラスのプロパティを呼び出すことはできません。クラスの詳細はこちらhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

これは簡単な方法ですが、私はこれが助けることができると確信しています

import { HelloChandu } from './helpers'

Answer 2

：

は

export function HelloChandu() { 

} 

export function HelloTester() { 

} 

そして、そのようにそれらをインポートする：あなたは、ヘルパー関数を作っている場合は、代わりにこのような機能をエクスポートファイルを作成する必要があります。ディレクトリ内の任意の場所にfileAを作成し、すべての関数をエクスポートします。

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 
} 

ここで、あなたのReactコンポーネントクラスでは、単純に1つのimport文を書くことができます。

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;