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

Posted 2023-03-15

技术标签:

【中文标题】反应原生导航器在大型应用程序中建模的最佳方式？【英文标题】：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 对第二种情况进行建模。~~