Question

我正在遵循着名的“完全反应本机和redux课程”教程，我正在使用redux和firebase实施react-navigation，我的问题是它使用了过时的“ react-native-router-flux”方法，但我尝试遵循它，但是该项目根本没有构建。

我试图逐步迁移它，以进行官方的反应导航，问题是，当尝试从异步功能（例如firebase登录功能）内部导航时，导航无法正常工作（（请记住，我正在使用redux）

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

这是我的异步功能代码（在actions.js内部）：

import firebase from 'firebase';
import { NavigationActions } from 'react-navigation'

import {
    EMAIL_CHANGED,
    PASSWORD_CHANGED,
    LOGIN_USER_SUCCESS,
    LOGIN_USER_FAIL,
    LOGIN_USER
} from './types';

export const emailChanged = (text) => {
    return {
        type: EMAIL_CHANGED,
        payload: text

    };
};

export const passwordChanged = (text) => {
    return {
        type: PASSWORD_CHANGED,
        payload: text

    };
};

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

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

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

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

    dispatch({
        type: LOGIN_USER_SUCCESS,
        payload: user,

    });


      NavigationActions.navigate({ routeName: 'employeeList' })

    };

和我的路由器文件：

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;

我的调用Asynch函数的登录组件：

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'
        }
    }

Answer 1

更新

您需要这样导入NavigationActions

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' })],
    }),


};

反应导航“导航”功能在firebase中不起作用异步登录功能

1 个答案: