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

时间:2015-07-20 08:30:03

标签: javascript ios reactjs react-native

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

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

我有三个分支navigationsidemenu-belowmaster。 Sidemenu为第一个案例建模,而Navigation为第二个案例建模。

更新

我现在有分支navigationsidemenu-belowinitialmaster

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

其他实验位于sidemenu-belowinitial分支。

修正了代码,工作正常!

2 个答案:

答案 0 :(得分:7)

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

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

答案 1 :(得分:0)

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

我忘记从curl_setopt( $ch, CURLOPT_POST, true ); curl_setopt( $ch, CURLOPT_POSTFIELDS, $postFields ); 文件中的View导入TextReact。愚蠢的错误!