react-native-navigation - 由于 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: {

  }
}

然后，将您的屏幕推送到与MyStackid 关联的堆栈：

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