【问题标题】：react native navigator best way to model in a large app?反应原生导航器在大型应用程序中建模的最佳方式？
【发布时间】：2015-07-20 08:30:02
【问题描述】：

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

首先，我们可以使用 Navigator 组件作为顶级组件，并将 props 传递给每个需要 navigator 对象的子组件，或者使用 passProps 将它们传递到下一个视图并再次使用 props 使它们可用于子组件。
其次，人们在谈论通量架构，他们说触发一些动作并使用该动作触发下一个视图的导航。这很好，因为我们可以检查各种状态并将用户重定向或限制到不同的视图，例如登录、登录、所有者等。

我尝试使用第二种策略对导航进行建模，触发一些操作并存储监听它并以状态作为有效负载发出更改。然后，我检查 Navigation Top View 组件以检查键并使用 if 语句使用this.prop.navigator.push 触发导航。我遇到的问题是导航器不会改变 else if 语句。从理论上讲，它应该工作，但它不工作，我不知道。

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

有人可以为我提供任何用例的示例建模图或 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} />
    );
  }
});

NavigatorStore：

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

如果有人喜欢研究代码，请到这个页面： React Native Flux Navigation Discussion

~~我有三个分支navigation、sidemenu-below 和master。 Sidemenu 对第一种情况进行建模，而 Navigation 对第二种情况进行建模。~~

更新

我现在有分支navigation、sidemenu-below、initial 和master。

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

其他实验在sidemenu-below 和initial 分支中。

修复了代码，工作正常！

【问题讨论】：

代码多行，怎么办？
我正在使用 Fluxxor，现在提供的示例代码应该没问题。 @zvona

标签： javascript ios reactjs react-native

【解决方案1】：

请查看https://github.com/aksonov/react-native-router-flux，也许它会帮助您和任何有兴趣在大型应用程序中管理导航的人。

它允许在顶级应用程序组件（通常是 index.*.js）中定义所有应用程序转换（“路由”），然后在代码中的任何位置使用 Actions.logIn 或 Actions.logOut 之类的东西来导航到所需的屏幕.

【讨论】：

这不支持原生商店，是吗？

【解决方案2】：

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

我忘记在other_view.js 文件中从React 导入View 和Text。愚蠢的错误！

【讨论】：