“反应导航”；“导航”；函数在firebase异步登录函数内不工作

我正在学习著名的教程“完整的react native and redux课程”， 我正在用redux和firebase实现react导航，我的问题是它使用的是过时的“react native router flux”方法，我试图遵循它，但项目根本没有构建

我尝试一步一步地将其迁移到官方的react导航中，问题是，当尝试从异步函数（如firebase登录函数）内部导航时，导航不起作用（请记住，我使用的是redux）

**更新：找到解决方案，以下是工作代码：

下面是我的异步函数代码（insideactions.js）：

和我的路由器文件：

import React from 'react';
import { StackNavigator } from 'react-navigation';
import LoginForm from './components/LoginForm';
import EmployeeList from './components/EmployeeList';


const Router = StackNavigator({
    login: { screen: LoginForm },
    employeeList: {screen: EmployeeList },

   },
   {

    initialRouteName: 'login',
   });

export default Router;

和App.js：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import firebase from 'firebase';
import ReduxThunk from 'redux-thunk';
//import LoginForm from './components/LoginForm';
import Router from './Router';

class App extends Component {

    componentWillMount(){
        const config = {
            apiKey: "AIzaSyDV_vLg656D36E8T9GVraA6ZmZrcUi2QH4",
            authDomain: "XXXXXXXXXX.firebaseapp.com",
            databaseURL: "https://XXXXXXXXX.firebaseio.com",
            projectId: "manager-ba44d",
            storageBucket: "manager-ba44d.appspot.com",
            messagingSenderId: "200262066369"
          };
          firebase.initializeApp(config);
    }

    render() {
        const store= createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
                <Router />
            </Provider>

        );
    }
}

export default App;

import React，{Component}来自'React'；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“./reducers”导入减速机；
从“firebase”导入firebase；
从“redux thunk”导入redux thunk；
//从“./components/LoginForm”导入LoginForm；
从“./Router”导入路由器；
类应用程序扩展组件{
组件willmount（）{
常量配置={
apiKey：“AIzaSyDV_vLg656D36E8T9GVraA6ZmZrcUi2QH4”，
authDomain:“xxxxxxxxx.firebaseapp.com”，
数据库URL:“https://XXXXXXXXX.firebaseio.com",
projectId:“manager-ba44d”，
storageBucket:“manager-ba44d.appspot.com”，
messagingSenderId：“200262066369”
};
firebase.initializeApp（配置）；
}
render（）{
conststore=createStore（reducer，{}，applyMiddleware（ReduxThunk））；
返回(
);
}
}
导出默认应用程序；

调用异步函数的我的登录组件：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from './common';

class LoginForm extends Component {
    static navigationOptions = () => ({
        title: 'Login screen',
        headerTitleStyle: { 
            textAlign:"center", 
            flex:1
         }
    });

    onEmailChange(text){
        this.props.emailChanged(text);
    }

    onPasswordChange(text){
        this.props.passwordChanged(text);
    }


    onButtonPress(){
        const {email, password, navigation} = this.props;
        this.props.loginUser({email, password}, navigation);
    }

    renderError(){
        if(this.props.error){
            return(
                <View style={{backgroundColor: 'white'}}>
                    <Text style={styles.errorTextStyle}>
                        {this.props.error}
                    </Text>
                </View>
            )
        }
    }

    renderButton(){
        if(this.props.loading){
            return <Spinner size="large" />;
        }

        return (
            <Button 
                    style={styles.buttonStyle}
                    buttonText="Login" onPress={this.onButtonPress.bind(this)}>
            </Button>
        );

    }

    render(){
        return(
            <Card>
                <CardSection>
                    <Input 
                    label="Email"
                    placeholder="email@gmail.com"
                    onChangeText={this.onEmailChange.bind(this)}
                    value={this.props.email}
                    />
                </CardSection>

                <CardSection>
                    <Input 
                    secureTextEntry
                    label="password"
                    placeholder="password"
                    onChangeText={this.onPasswordChange.bind(this)}
                    value={this.props.password}
                    />

                </CardSection>

                {this.renderError()}

                <CardSection>

                    {this.renderButton()}
                </CardSection>
            </Card>

        );
    }
}

const mapStateToProps = state => {
    return {
        email: state.auth.email,
        password: state.auth.password,
        error: state.auth.error,
        loading: state.auth.loading

    };

};

export default connect(mapStateToProps, 
    { 
    emailChanged,
    passwordChanged,
    loginUser
    })(LoginForm);


    const styles = {
        errorTextStyle: {
            fontSize: 20,
            alignSelf: 'center',
            color: 'red'

        },
        buttonStyle:{
            flex: 1,
        flexDirection: 'row',
        alignSelf: 'stretch'
        }
    }

import React，{Component}来自'React'；
从“react native”导入{View，Text}；
从'react redux'导入{connect}；
从“../actions”导入{emailChanged、passwordChanged、loginUser}；
从“/common”导入{Card，CardSection，Input，Button，Spinner}；
类LoginForm扩展组件{
静态导航选项=（）=>({
标题：“登录屏幕”，
标题样式：{
textAlign：“居中”，
弹性：1
}
});
onEmailChange（文本）{
此.props.emailChanged（文本）；
}
onPasswordChange（文本）{
this.props.passwordChanged（text）；
}
onButtonPress（）{
const{email，password，navigation}=this.props；
this.props.logiuser（{email，password}，导航）；
}
渲染器（）{
if（this.props.error）{
返回(
{this.props.error}
)
}
}
renderButton（）{
如果（本道具装载）{
返回；
}
返回(
);
}
render（）{
返回(
{this.renderError（）}
{this.renderButton（）}
);
}
}
常量mapStateToProps=状态=>{
返回{
电子邮件：state.auth.email，
密码：state.auth.password，
错误：state.auth.error，
加载：state.auth.loading
};
};
导出默认连接（MapStateTops，
{ 
改变了，
密码改变了，
登录用户
})（LoginForm）；
常量样式={
errorTextStyle：{
尺寸：20，
对齐自我：“中心”，
颜色：“红色”
},
按钮样式：{
弹性：1，
flexDirection:'行'，
自我定位：“伸展”
}
}

更新

您需要像这样导入导航操作

import { NavigationActions } from 'react-navigation'

export const loginUser = ({email, password}, navigation) => {
    return (dispatch) => {
        //indicate start user log in process
        dispatch({type: LOGIN_USER});

    firebase.auth().signInWithEmailAndPassword(email,password)
        .then(user => loginUserSuccess(dispatch, user))
        .then(NavigationActions.navigate('employeeList'))
        .catch(() => {
            firebase.auth().createUserWithEmailAndPassword(email, password)
                .then(user  => loginUserSuccess(dispatch, user, navigation))
                    .catch(() => loginUserFail(dispatch));
        });
    };
};

const loginUserFail = (dispatch) => {
    dispatch({type: LOGIN_USER_FAIL});
}

const loginUserSuccess = (dispatch, user, navigation) => {

    dispatch({
        type: LOGIN_USER_SUCCESS,
        payload: user,

    });

   NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'employeeList' })],
    }),


}; 

---

我尝试了你的代码，它是相同的，除了你在异步登录函数中做了另一个函数外，你能给出完整的代码示例，说明如何在成功登录后导航到另一个屏幕，以及是否需要在reducer文件中添加任何代码？你需要将this.props.navigation传递给LogiUser才能使用导航。你能展示一个你从哪里调用loginUser的更多代码吗？请看原始帖子中的完整代码，我编辑了它。你是如何从组件中调度你的操作的？非常感谢你的帮助Haider，但仍然不起作用，我们需要在reducer中添加任何东西吗*注意：我们是否需要将导航替换为“导航操作”？！！

import { NavigationActions } from 'react-navigation'

export const loginUser = ({email, password}, navigation) => {
    return (dispatch) => {
        //indicate start user log in process
        dispatch({type: LOGIN_USER});

    firebase.auth().signInWithEmailAndPassword(email,password)
        .then(user => loginUserSuccess(dispatch, user))
        .then(NavigationActions.navigate('employeeList'))
        .catch(() => {
            firebase.auth().createUserWithEmailAndPassword(email, password)
                .then(user  => loginUserSuccess(dispatch, user, navigation))
                    .catch(() => loginUserFail(dispatch));
        });
    };
};

const loginUserFail = (dispatch) => {
    dispatch({type: LOGIN_USER_FAIL});
}

const loginUserSuccess = (dispatch, user, navigation) => {

    dispatch({
        type: LOGIN_USER_SUCCESS,
        payload: user,

    });

   NavigationActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'employeeList' })],
    }),


};