android - React Native Router 通量 action.key() 不起作用

问题描述

我正在 React Native 上构建一个项目，我是 React Native 的新手。但不幸的是 Actions.key() 不起作用。这是我的代码详细信息

应用程序.js

import React, { Component } from 'react';
import { AsyncStorage, ActivityIndicator } from 'react-native';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { PersistGate } from 'redux-persist/integration/react'
import Spinner from './components/common/Spinner'; 
import reducers from './reducers';
import Router from './Router';
import { persistStore, persistReducer } from 'redux-persist'

class App extends Component {

  render() {
    renderLoading = () =>
{
 <Spinner size="large" />;  
}
    const persistConfig = {
      key: 'root2',
      storage: AsyncStorage  
    }
    const persistedReducer = persistReducer(persistConfig, reducers) 
    const store = createStore(persistedReducer, {}, applyMiddleware(ReduxThunk));
    const persistor = persistStore(store);
    return (

      <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <Router />
        </PersistGate>
      </Provider>
    );
  }
}

export default App;


LoginForm.js



import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { emailChanged, passwordChanged, loginUser, loginUserSuccess1 } from '../actions';
import { Card, CardSection, Input, Button, Spinner } from './common';
import { Actions } from 'react-native-router-flux';
import NameEnter from './NameEnter';
import Router from '../Router';

class LoginForm extends Component {
  componentDidMount()
  {

    console.log (this.props.userDetails); 
    if(this.props.userDetails != null) 
    {
    if (this.props.userDetails.success !== false) {
      console.log (this.props.userDetails.success);
      this.props.loginUserSuccess1(this.props.userDetails);    

    }   
  }     
    //Actions.screen1();   

  }
  onEmailChange(text) {

    this.props.emailChanged(text);
  }

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

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

    this.props.loginUser({ email, password });
  }

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

    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Login
      </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>

        <Text style={styles.errorTextStyle}>
          {this.props.error}
        </Text>

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

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

const mapStateToProps = ({ auth }) => {
  const { email, password, error, loading , userDetails } = auth;

  return { email, password, error, loading , userDetails };
};

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

AuthActions.js

 import { Actions } from 'react-native-router-flux';
    import axios from 'react-native-axios';


    import {
      EMAIL_CHANGED,
      PASSWORD_CHANGED,
      LOGIN_USER_SUCCESS,
      LOGIN_USER_FAIL,
      LOGIN_USER,
      URL
    } 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 }) => {
      return (dispatch) => {
        dispatch({ type: LOGIN_USER });

      axios.post(URL + '/hostLogin', {
          email: email,
          password: password
        })
        .then((user) => {
          console.log(user.data);
          loginUserSuccess(dispatch, user);
        })
        .catch((error) => {
          loginUserFail(dispatch);
        });
        // firebase.auth().signInWithEmailAndPassword(email, password)
        //   .then(user => loginUserSuccess(dispatch, user))
        //   .catch((error) => {
        //     console.log(error);

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

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

    const loginUserSuccess = (dispatch, user) => {

      dispatch({
        type: LOGIN_USER_SUCCESS,
        payload: user.data
      });

      Actions.main();
    };
    export const loginUserSuccess1 = (user) => {
      console.log(1);
      return {
        type: 'Navigate',
        payload: 'Success'
      };


    };

AuthReducer.js

import {
  EMAIL_CHANGED,
  PASSWORD_CHANGED,
  LOGIN_USER_SUCCESS,
  LOGIN_USER_FAIL,
  LOGIN_USER
} from '../actions/types';
import { Actions } from 'react-native-router-flux';

const INITIAL_STATE = {
  email: '',
  password: '',
   userDetails: null,
  error: '',
  loading: false
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return { ...state, email: action.payload };
    case PASSWORD_CHANGED:
      return { ...state, password: action.payload };
    case LOGIN_USER:
      return { ...state, loading: true, error: '' };
    case LOGIN_USER_SUCCESS:
    console.log(action.payload );
      return { ...state, userDetails: action.payload }; 
    case LOGIN_USER_FAIL:
      return { ...state, error: 'Authentication Failed.', password: '', loading: false };
      case 'Navigate':
      console.log(2);
      Actions.main();  
       default: 
      return state;
  }
};

这是 Router.js

import React from 'react';
import { Scene, Router, Actions } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import NameEnter from './components/NameEnter';


const RouterComponent = () => {
  return (
    <Router>
    <Scene key="root" hideNavBar>
      <Scene key="auth" >
        <Scene key="login" component={LoginForm} title="Please Login" />
      </Scene>
      <Scene key="main">
        <Scene key="screen1" component={NameEnter} title="Please Enter Your Name " />
      </Scene>
      </Scene>
    </Router> 
  );
};

export default RouterComponent;

现在在 Authreduce.js 我使用 Actions.main() 导航到 main 。但这行不通。是不是路由器设置有问题。请帮忙

标签： androidreactjsreact-nativereact-reduxreact-router

android - React Native Router 通量 action.key() 不起作用

问题描述

解决方案

推荐阅读