在 React Native 中使用 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);

然后在目录 components/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}

在目录 components/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}

在目录 components/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

一个选项是使用 global，就像这里提到的。另请参阅所属问题的已接受答案。也许这对你来说也是一种选择。

在 React Native 中使用 React Navigation 设置和访问可变应用程序全局参数

Set and access mutable app global params with React Navigation in React Native

react-native

react-navigation