React Native：すべてのアプリ画面からアクセスできるカスタムコンポーネント

Question

どの画面からでもアクセスできるカスタムコンポーネントを作成するための最良の方法は何ですか？

カスタムアラートについて考えてみましょうcomponent私は私のアプリのすべての画面でそれが必要なので、エラーが発生したときに私はそれを表示することができます。

は現在、私はそれをこのようにやっている：

// AlertModal.js

import ... from ...; 

const AlertModal = (props) => { 

    const {isSuccess, headerText, bodyText, onClosed, isOpen, onBtnPress} = props; 

    return (

     <Modal 
     ... 
     isOpen={isOpen} 
     onClosed={() => onClosed()} 
     > 

     <View ...> 

      <Text>{headerText}</Text> 

      <Text>{bodyText}</Text> 

      <Button 
      ... 
      onPress={() => onBtnPress()} 
      > 
       ... 
      </Button> 

     </View> 

     </Modal> 

) 
}; 

export default AlertModal; 

//Foo.js

import ...from ...; 

const Foo = (props) => { 

    const { alertIsSuccess, alertHeaderText, alertBodyText, alertIsOpen, alertOnClosed, alertOnBtnPress, onBtnPress, ...rest } = props; 

    return (
    <View style={}> 

    ...  

     <View style={}> 
     ... 
     </View> 


     <Button 
      onPress={() => onBtnPress()} 
     /> 

     <AlertModal 
     isSuccess={alertIsSuccess} 
     headerText={alertHeaderText} 
     bodyText={alertBodyText} 
     isOpen={alertIsOpen} 
     onClosed={alertOnClosed} 
     onBtnPress={alertOnBtnPress} 
     /> 

    </View> 
) 

}; 

export default QrCodeReader; 

//FooContainer.js

import ... from ...; 

class FooContainer extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      bar: false, 
      baz: true, 
      bac: '', 
      bax: false, 
      bav: '', 

      // Alert 
      alertIsOpen: false, 
      alertIsSuccess: false, 
      alertHeaderText: '', 
      alertBodyText: '', 
      alertOnClosed() {}, 
      alertOnBtnPress() {}, 
     }; 

     this.onBtnPress = this.onBtnPress.bind(this); 
    } 

    alert(isSuccess, headerText, bodyText, onBtnPress, onClosed) { 

     const self = this; 

     this.setState({ 
     alertIsOpen: true, 
     alertIsSuccess: isSuccess, 
     alertHeaderText: headerText, 
     alertBodyText: bodyText, 
     alertOnBtnPress: onBtnPress || function() { self.alertClose() }, 
     alertOnClosed: onClosed || function() {}, 
     }); 

    } 

    alertClose() { 

     this.setState({ 
     alertIsOpen: false, 
     }); 

    } 

    onBtnPress() { 

     this.alert(
      true, 
      'header text', 
      'body text', 
     ) 

    } 

    render() { 
     return (
      <Foo 
      onBtnPress={this.onBtnPress} 
      {...this.state} 
      /> 
     ); 
    } 
} 

export default FooContainer; 

ご覧のとおり、これは痛みです（私は間違った方法と思います）。このようにすると、AlertModalコンポーネントを私のアプリケーションのすべてのcomponentに含める必要があります。ここでは、警告を表示して新しいプロンプトを表示し、新しい不要な<AlertModal />コンポーネントを作成する必要があります。

正しい方法は何ですか？

p.s.私はreact-native-router-fluxを私のアプリのルータとして使用しています。 p.s.s.私はMeteor.js + CordovaからReact-nativeに来ています。そこでは、ただ一つのモーダルを作り、それをメインのlayoutに入れて、必要なときにその中に適切な動的テキストを表示/非表示します。

//Main.js 
class Main extends Component { 
     render() { 
     return (
      <Router backAndroidHandler={() => true}> 
      <Scene key="root"> 
       <Scene key="login" type='reset' component={SignInContainer} initial={true} hideNavBar={true}/> 
       <Scene key="qrCode" type='reset' component={FooContainer} hideNavBar={true} /> 
      </Scene> 
      </Router> 
     ); 
     } 
} 

Answer 1

はこれが最善の解決策ではないかもしれませんが、何を行うことができますことはリアクトのcontext機能を使用している：

は、これは私が私のアプリでナビゲートする方法です。基本的には、コンポーネントをトリガーする関数参照を、表示/非表示にします（たとえば、stateをコンテキストに変更することによって）。階層内のすべての子は、その関数を呼び出すことができるはずです。

しかし、Facebookはコンテキスト機能を使用しないようにしています。あなたの小道具/状態と同じように追跡するのが簡単ではないため、デバッグ時に問題が発生する可能性があります。

Reduxでは、コンポーネントが購読されているプロパティを変更するアクションを作成している可能性があります。他のすべてのコンポーネントは、その動作をdispatchとするだけで、モーダルコンポーネントを表示するプロパティの値を変更することができます。あなたは、私がお勧めすることができreact-native-router-fluxを使用しているという事実に基づいて

Answer 2

：所有しているのシーンコンポーネントに

リワークAlertModalは、モーダルを使用しないでください。プロパティを渡すことで、表示する内容を制御することができます。 は、このような「モーダル」スキーマとしてルータにAlertModalコンポーネントを含める：

import AlertModal from '../components/AlertModal'; 
//Main.js 
class Main extends Component { 
    render() { 
    return (
     <Router backAndroidHandler={() => true}> 
     <Scene key="root"> 
      <Scene key="login" type='reset' component={SignInContainer} initial={true} hideNavBar={true}/> 
      <Scene key="qrCode" type='reset' component={FooContainer} hideNavBar={true} /> 
      <Scene key="alertModal" duration={250} component={AlertModal} schema="modal" direction="vertical" hideNavBar={true} /> 
     </Scene> 
     </Router> 
    ); 
    } 
} 

そして、あなただけで任意のシーンから、それを呼び出すことができます。行動が、この種のを希望する場合

Actions.alertModal({ >optional props you want to pass< }); 

わかりませんのモーダルは、Androidで戻るボタンで終了することがあります。そうでなければ、その周りに道があります。