2017-02-06 9 views
1

У меня проблема с RNRF, Action.SomeRoute() не работает в моем компоненте входа, в любое время я пытаюсь использовать Action.SomeRoute(), он ничего не делает, но отлично работает в других компонентах, я хочу иметь возможность перенаправлять с помощью Actions.SomeRoute(), после входа в мою учетную запись, я не вижу проблемы, но вот мой код.Переадресация после входа в систему Реагирование Нативный маршрутизатор Flux

Мой Войти Компонент:

import React, {Component} from 'react'; 
import {View, Text, Animated, ScrollView, Easing} from 'react-native'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import {Actions} from 'react-native-router-flux'; 
import FitImage from 'react-native-fit-image'; 
import styles from '../styles/containers/Login'; 
import Button from '../presenters/partials/Button'; 
import Input from '../presenters/partials/Input'; 
import * as Headers from '../presenters/partials/Headers'; 
import {ActionCreators} from "../actions/_actions"; 
const logo = require('../assets/images/logo.png'); 

class Login extends Component{ 

    constructor(props) { 
     super(props); 
     this.state = {}; 
    } 

    componentWillMount(){...} 

    componentDidMount(){...} 

    _textChange(key: string, value: string){ 
     const newState = {}; 
     newState[key] = value; 
     this.setState(newState); 
    } 

    componentDidUpdate(){ 
     if (this.props.auth.isAuthenticated) { 
      Actions.Dashboard({type: 'reset'}); 
     } 
    } 

    render(){ 
     return (<View style={styles.wrapper}> 
        <View style={styles.logo_container}> 
         <FitImage style={styles.logo} source={logo} /> 
         <Headers.H3 style={styles.name}>{'CRS Waterboard'}</Headers.H3> 
       </View> 
       <Animated.View 
        style={[styles.form_container, { 
         flex: this.state.formContainerAnimation 
        }]}> 
        <Animated.View style={[styles.form, { 
         opacity: this.state.formOpacityAnimation, 
         height: this.state.formHeightAnimation 
        }]}> 
         <ScrollView style={styles.formInner}> 
          <Headers.H4 style={styles.welcome}>{'Sign In To Continue'}</Headers.H4> 
          <Input style={styles.input} 
            onChangeText={this._textChange.bind(this, 'username')} 
            placeholder={'Username'} 
            radius={'large'}/> 
          <Input style={styles.input} 
            onChangeText={this._textChange.bind(this, 'password')} 
            placeholder={'Password'} 
            radius={'large'} 
            secureTextEntry={true}/> 
          <Button style={styles.loginButton} onPress={this._login.bind(this)} type={'primary'} size={'large'}> Sign In </Button> 
         </ScrollView> 
        </Animated.View> 
       </Animated.View> 
      </View>); 
    } 

    _login(){ 
     // get username and password from state 
     let {username, password} = this.state; 
     // if username and password were entered 
     if (username.length > 0 && password.length > 0) { 
      // get creds from form 
      let creds = {username, password}; 
     } 
     // log user in 
     this.props.login(creds); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    // map actions to dispatch and return 
    return bindActionCreators(ActionCreators, dispatch); 
}; 

const mapStateToProps = (state) => { 
    let {auth, route} = state; 
    return {auth, route}; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Мои Маршруты:

<ConnectedRouter> 
     <Scene key={"root"}> 
      <Scene 
       key="tabbar" 
       tabs={true} 
       tabBarStyle={styles.tabBarStyle}> 

       <Scene icon={TabIcon} key={'dashboardTab'} title={'Dashboard'}> 
       <Scene 
        key={'Dashboard'} 
        direction={'horizontal'} 
        component={Dashboard} 
        title={'Dashboard'} 
        hideNavBar={true} 
        initial={(this.props.initial == 'Home' ? true : false)} 
        sceneStyle={[styles.sceneStyleWithTabar]}/> 
       </Scene> 

       <Scene 
        icon={TabIcon} 
        key={'History'} 
        direction={'horizontal'} 
        component={Home} 
        title={'History'} 
        sceneStyle={[styles.sceneStyleWithNavbar, styles.sceneStyleWithTabar]} 
        navigationBarStyle={styles.navbar} 
        titleStyle={styles.title} 
        titleWrapperStyle={styles.titleWrapper} 
        renderLeftButton={(nav) => {return null;}}/> 
       <Scene key="newTab" title="New" icon={TabIcon}> 
        <Scene 
         key={'New'} 
         direction={'horizontal'} 
         component={New} 
         title={'New Reading'} 
         sceneStyle={[styles.sceneStyleWithNavbar, styles.sceneStyleWithTabar]} 
         navigationBarStyle={styles.navbar} 
         titleStyle={styles.title} 
         titleWrapperStyle={styles.titleWrapper} 
         renderLeftButton={(nav) => {return null;}}/> 
        <Scene 
         key={'NewReading'} 
         direction={'horizontal'} 
         component={NewReading} 
         title={'New Reading'} 
         sceneStyle={[styles.sceneStyleWithNavbar, styles.sceneStyleWithTabar]} 
         navigationBarStyle={styles.navbar} 
         titleStyle={styles.title} 
         titleWrapperStyle={styles.titleWrapper} 
         renderLeftButton={(nav) => {return null;}}/> 
        <Scene 
         key={'ReadingComplete'} 
         direction={'horizontal'} 
         component={ReadingComplete} 
         title={'Invoice'} 
         sceneStyle={[styles.sceneStyleWithNavbar, styles.sceneStyleWithTabar]} 
         navigationBarStyle={styles.navbar} 
         titleStyle={styles.title} 
         titleWrapperStyle={styles.titleWrapper} 
         renderLeftButton={(nav) => {return null;}}/> 
        <Scene key={'modal'}> 
         <Scene key={'root'}> 
          <Scene 
           key={'PrintInvoice'} 
           component={PrintInvoice} /> 
         </Scene> 
        </Scene> 
       </Scene> 
       <Scene 
        icon={TabIcon} 
        key={'Account'} 
        direction={'horizontal'} 
        component={Account} 
        title={'My Account'} 
        sceneStyle={[styles.sceneStyleWithNavbar, styles.sceneStyleWithTabar]} 
        navigationBarStyle={styles.navbar} 
        titleStyle={styles.title} 
        titleWrapperStyle={styles.titleWrapper} 
        renderLeftButton={(nav) => {return null;}}/> 
      </Scene> 
      <Scene 
       key={'Login'} 
       tabs={false} 
       direction={'horizontal'} 
       component={Login} 
       title={'Login'} 
       hideNavBar={true} 
       initial={(this.props.initial == 'Login' ? true : false)} /> 
     </Scene> 
    </ConnectedRouter> 

Будет очень ценю вашу помощь, спасибо!

ответ

0

Попробуйте проверить подлинность статуса в componentWillReceiveProps

componentWillReceiveProps(nextProps) { 
if (this.nextProps.auth.isAuthenticated) { 
    Actions.Dashboard({type: 'reset'}); 
} 
} 
+0

Я уже реализован, но с компонентом сделал обновление, и он видит новое обновление, но то, что я получил неправильно было это, RNRF не позволяет просто перейти к новому маршруту внутри группы маршрутов в этом случае группа вкладок, есть решение, требующее клонирования, но каждый раз, когда я делаю это, мой UI ломается, так как решение я направляю в группу, используя его ключ в этом случае, я буду делать 'Actions.tabbar ({type: 'reset'})' this будет загружать первую сцену в группе для меня, и это нормально! Приготовлю и отправлю ответ спасибо! –

+0

Любые обновления на этом @DanielBarde? Я сталкиваюсь с тем, что, похоже, является точно такой же проблемой. –

 Смежные вопросы

  • Нет связанных вопросов^_^