React NavigationでReact Navigationを使用して可変アプリグローバルパラメータを設定してアクセスする

Question

React Navigation StackNavigator内で変更可能なグローバルパラメータを宣言する方法はありますか？私は、アプリケーション内のグローバル変数の参照の中心点を達成しようとしています。

これは私のindex.android.jsであると仮定します

import { 
AppRegistry 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

import {MainScreen} from './components/mainScreen'; 
import {SegundoScreen} from './components/segundoScreen'; 
import {TerceraScreen} from './components/terceraScreen'; 

const SampleAppStack = StackNavigator(
    { 
    Home :    { screen : MainScreen }, 
    SegundoScreen : { screen : SegundoScreen }, 
    TerceraScreen :  { screen : TerceraScreen } 
    }, 
    { 
    headerMode: 'none' 
    }, 
    { 
    appGlobalVariables: { 
     Session : '', 
     variable1 : 'cool', 
     variable2 : 'coolant', 
     variable3 : 'color', 
     variable4 : 'none', 
     objetoUno : {}, 
     objetoDos : {}, 
     objetoTres : {} 
    } 
    } 
); 

AppRegistry.registerComponent('SampleApplication',() => SampleAppStack); 

次に、ディレクトリコンポーネント/ mainScreen.jsで、私はおそらく持っている...

import React, { Component } from 'react'; 
import {Text,View} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 

class MainScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {dummyProp:'dummyProp'}; 
} 

render() { 
    var {appGlobalVariables} = this.props.StackNavigator; 
    return (
    <View> 
    <Text>Received from App's global variables: {appGlobalVariables.variable1}</Text> 
    </View> 
); 
} 
} 

export {MainScreen} 

とディレクトリコンポーネント/ segundoScreenでは。 js、私はおそらく...

import React, { Component } from 'react'; 
import {Text,View} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 

class SegundoScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {dummyProp:'dummyProp'}; 
} 

render() { 
    var {appGlobalVariables} = this.props.StackNavigator; 
    return (
    <View> 
    <Text>Received from App's global variables: {appGlobalVariables.variable2}</Text> 
    </View> 
); 
} 
} 

export {SegundoScreen} 

ディレクトリコンポーネント/ terceraScreen.jsで、私はおそらく...

import React, { Component } from 'react'; 
import {Text,View} from 'react-native'; 

import { StackNavigator } from 'react-navigation'; 

class TerceraScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {dummyProp:'dummyProp'}; 
} 

render() { 
    var {appGlobalVariables} = this.props.StackNavigator; 
    return (
    <View> 
    <Text>Received from App's global variables: {appGlobalVariables.variable3}</Text> 
    </View> 
); 
} 
} 

export {TerceraScreen} 

私は試しましたが、動作しません。

Answer 1

オプションは、https://stackoverflow.com/a/36994650/4805414のようにglobalを使用することです。所属する質問に対する受け入れられた回答も参照してください。たぶんあなたのための選択肢かもしれません。