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

Question

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

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

我尝试使用第二策略建模导航,触发一些操作并存储监听它并以状态作为有效负载发出更改.然后,我检查导航顶视图组件以检查密钥并使用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为第二个案例建模.

UPDATE

我现在有分支navigation,sidemenu-below,initial和master.

navigation正在使用助焊剂行动. master正在使用道具

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

修复了代码,工作正常!

Answer 1

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

它允许在顶级应用程序组件(通常是索引.*.js)中定义所有应用程序转换("路由"),然后在代码中的任何位置使用诸如Actions.logIn或Actions.logOut之类的东西来导航到所需的屏幕.