作为 redux 操作的结果推送屏幕

Question

最近试过https://wix.github.io/react-native-navigation/v2/#/ 据我了解，v2 中解决的问题之一是 由于 redux 操作而推送屏幕。基本上我仍然怀疑在组件外部使用导航器的正确方法是什么。

export function loginUser(user, componentId) {
  return async (dispatch) => {
    dispatch({ type: ActionTypes.LOGIN_PENDING })

    Api.loginUser(user)
      .then((response) => {
        // success
        Navigation.push(componentId, { component: { name: 'Profile' }})

      })
      .catch((err) => {
        dispatch({
          type: ActionTypes.LOGIN_ERROR,
          payload: { ...err.response.data, status: err.response.status },
        })
      })
  }
}

我觉得传递 componentId 有点奇怪。你们是怎么做到的？建议赞赏！

Answer 1

要从堆栈范围外推送屏幕 - 您首先需要为堆栈分配一个预定义的 id，然后您可以通过传递堆栈的 ID（而不是一些）轻松地从操作中推送到它componentId 您从组件传播到您的操作。

首先，为您的堆栈分配一个 ID：

const stack = {
  id: 'MyStack', // This will allow you to interact with the stack from your actions
  children: [
    {
      component: {}
    },
    {
      component: {}
    }
  ],
  options: {

  }
}

然后，将您的屏幕推送到与 MyStack id:

关联的堆栈

Navigation.push('MyStack', {
  component: {
    name: 'MyComponent'
  }
});

作为 redux 操作的结果推送屏幕

Push a screen as a result of a redux action

react-native-navigation

wix-react-native-navigation