Question

我可以使用屏幕组件中的this.props.navigation进行导航。我应该如何在mobx商店文件中进行类似操作？或者我应该在商店中执行导航？

我阅读了Navigating without the navigation prop文章，但似乎只适用于屏幕组件，对吗？

有人说使用global变量存储this.props.navigation引用并在任何地方使用它，但我不喜欢这个想法......

Answer 1

是的：

在调用方法时将导航类转发到商店：

// add nivagation parameter to store fucntion:
this.props.store.handleSomething(data, this.props.navigation);

或者您可以单独导航器（警告仅适用于其中一个）：

return <Navigator ref={(nav) => this.props.store.navigator = nav} />;

在渲染完成后，它将在商店中设置navigator属性。

但我建议将所有路由状态存储在路由存储中，如下所示：https://github.com/alisd23/mobx-react-router。

通过这种方式，您可以轻松访问导航状态，并确保所有内容都能正确重新呈现。（当组件中的渲染功能也取决于导航变化！）

Answer 2

您可以将所有状态（包括导航状态）保留在mobx商店中。

例如：

// sourced and modified from https://github.com/react-community/react-navigation/issues/34#issuecomment-281651328

class NavigationStore {
  @observable headerTitle = "Index"
  @observable.ref navigationState = {
    index: 0,
    routes: [
      { key: "Index", routeName: "Index" },
    ],
  }

  // NOTE: the second param, is to avoid stacking and reset the nav state
  @action dispatch = (action, stackNavState = true) => {
    const previousNavState = stackNavState ? this.navigationState : null;
    return this.navigationState = AppNavigator
        .router
        .getStateForAction(action, previousNavState);
  }
}

// NOTE: the top level component must be a reactive component
@observer
class App extends React.Component {
  constructor(props, context) {
    super(props, context)
    // initialize the navigation store
    this.store = new NavigationStore()
  }

  render() {
    // patch over the navigation property with the new dispatch and mobx observed state
    return (
      <AppNavigator navigation={addNavigationHelpers({
        dispatch: this.store.dispatch,
        state: this.store.navigationState,
        addListener: () => { /* left blank */ }
      })}/>
    )
  }
};

然后，您可以直接调用商店的dispatch操作以导航到新屏幕。

Answer 3

将此this.props.navigation作为参数发送到商店。然后像在组件端一样使用。

LoginStore.login(this.props.navigation)

在LoginStore中

@action login = (navigation) => { navigation.navigate('Page');}

如何使用反应导航在mobx商店中导航？

3 个答案: