9

我正在使用 React Native 和 Redux 开发一个移动应用程序，我正面临一个软件设计问题。如果该操作成功，我想调用 REST API（异步操作）进行登录并导航到主视图。我正在使用 redux 和 thunk，所以我已经实现了异步操作，所以我的主要疑问是：我应该把导航到主视图的逻辑放在哪里？

我可以直接从操作访问导航器对象并在那里执行导航吗？我应该在登录组件中这样做吗？（正如我已经在做的那样 - 检查下面的代码）。

componentWillReceiveProps(nextProps){
    if(nextProps.errorLoginMsg){
        Alert.alert("Login Failed", nextProps.errorLoginMsg);
    }
    else if(!nextProps.user.isNull()){
      this.props.navigator.replace({name: 'main'});
    }
  }

我对组件中的逻辑没有信心。似乎不是一个好习惯。有没有其他方法可以做到这一点？

谢谢

4

2 回答 2

0

这是使用当前 Navigator API 进行本机反应的最困难的问题之一。我建议拥有一个包含当前路线的路线商店，并让包含连接到该商店的导航器的组件并在componentWillReceiveProps.

于 2016-03-26T18:09:06.153 回答
0

这是我如何做的代码：

                const resetAction = NavigationActions.reset( {
                    index  : 0,
                    actions: [
                        NavigationActions.navigate( { routeName: 'Home' } )
                    ]
                } );

                this.props.requestDeleteEvent( {
                    id: eventID
                } ).then( () => {
                    this.props.navigation.dispatch( resetAction );
                } );

在函数 requestDeleteEvent 内部：

export function requestDeleteEvent(requestData) {
    const id = requestData.id;

    return (dispatch, getState) => {
        return fetch(Config.event + id, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json; charset=UTF-8',
            },
        })
            .then((response) => getResponseJson(response))
            .then((responseJson) => {
                    if (responseJson.isSuccess) {
                        return dispatch(deleteEvent(id));
                    } 
                    else {
                        return dispatch(triggerToast({type: 'alert', content: ERROR}));
                    }
                }
            );
        }
    }
于 2017-08-25T12:17:33.787 回答