反应本机导航器在大型应用程序中建模的最佳方式？

Question

我想知道如何使用大型应用程序的 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} />
    );
  }
});

导航器商店：

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 分支中。

修复了代码，工作正常！

Answer 1

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

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

Answer 2

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

它允许在顶级应用程序组件（通常是 index.*.js）中定义所有应用程序转换（'routes'），然后在任何地方使用类似 Actions.logIn 或 Actions.logOut 的内容在代码中导航到所需的屏幕。

反应本机导航器在大型应用程序中建模的最佳方式？

react native navigator best way to model in a large app?

javascript

ios

reactjs

react-native

更新

修复了代码，工作正常！