Javascript react native navigator在大型应用程序中建模的最佳方式？

我想知道如何使用react native的Navigator组件为大型应用程序建模。我有两个想法：

• 首先，我们可以使用Navigator组件作为顶级组件，并将道具传递给需要Navigator对象的每个子组件，或者使用passProps将它们转移到下一个视图，并再次使用道具将它们提供给子组件
• 第二，人们正在谈论flux架构，他们说触发一些动作，并使用该动作触发下一个视图的导航。这很好，因为我们可以检查各种状态，并将用户重定向或限制到不同的视图，例如loggedIn、loggedOut、Owner等

我尝试使用第二种策略对导航进行建模，触发一些操作，存储侦听它并以状态作为有效负载发出更改。然后，我检查导航俯视图组件以检查键，并使用if语句触发导航，使用

this.prop.navigator.push

。我遇到的问题是，对于elseif语句，navigator不会更改。从理论上讲，它应该会起作用，但它不起作用，我也不知道

对于模型一，我在传递道具方面遇到了问题。太乱了

有人能为我提供任何用例的示例建模图或github应用程序吗

示例代码：

var Navigation = React.createClass({
  mixins: [FluxMixin, StoreWatchMixin("NavigationStore")],
  getStateFromFlux: function() {
    var flux = this.getFlux();

    console.log('Handled the Navigation: ', flux.store('NavigationStore').getState());
    // console.log(this.props.navigator);
    var currentState = flux.store("NavigationStore").getState();
    if(currentState.data.key !== undefined && currentState.data.key.explore !== undefined) {
      this.props.navigator.push({
        id: 'YETANOTHERVIEW',
        title: 'Yet Another View',
        component: SomethingView,
        navigationBar: <NavigationBar title="Something View" />,
        passProps: {
          navigator: this.props.navigator
        }
      });
    } else if(currentState.data.key !== undefined && currentState.data.key.other !== undefined) {
      this.props.navigator.push({
        id: 'OTHERVIEW',
        title: 'Other View',
        component: OtherView,
        navigationBar: <NavigationBar title="Other View" />,
        passProps: {
          navigator: this.props.navigator
        }
      });
    } else if(currentState.data.key !== undefined && currentState.data.key.appointments !== undefined) {
      AlertIOS.alert('Foo Title', 'My Alert Message');
    }
    return flux.store("NavigationStore").getState();
  },
  render: function() {
    return (
        <WelcomeView navigator={this.props.navigator} />
    );
  }
});

如果有人想学习代码，请转到本页：

我有三个分支

navigation

、下面的

侧菜单
和
master
。侧菜单为第一种情况建模，导航为第二种情况建模。

更新
我现在有了分支
导航
、下面的
侧菜单
、
初始
和
主

导航
正在使用通量操作。
master
正在使用道具

其他实验在下面的
侧菜单
和
初始
分支中

修正了代码，工作正常 我能够解决这个问题，在给定的存储库中应该可以正常工作

我忘了从
React
的
other_View.js
文件导入
视图和
文本。愚蠢的错误
 请检查，也许它将帮助您和任何有兴趣在大型应用程序中管理导航的人

它允许在顶级应用程序组件（通常为index.*.js）中定义所有应用程序转换（“路由”），然后在代码中的任何位置使用类似于Actions.logIn或Actions.logOut的内容导航到所需屏幕。
有很多行代码，我应该怎么做？我正在使用Fluxxor，现在提供的示例代码应该可以@zvonaThis没有本地存储支持，是吗？
var NavigationStore = Fluxxor.createStore({
  initialize: function() {
    this.data = {};

    this.bindActions(
      constants.CHANGE_NAVIGATION, this.onChangeNavigation,
    );
  },

  onChangeNavigation: function(payload) {
    console.log('on change navigation: ', payload);
    this.data = payload;
    this.emit("change");
  },

  getState: function() {
    return {
      data: this.data,
    };
  },
});