У меня проблема с 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>
Будет очень ценю вашу помощь, спасибо!
Я уже реализован, но с компонентом сделал обновление, и он видит новое обновление, но то, что я получил неправильно было это, RNRF не позволяет просто перейти к новому маршруту внутри группы маршрутов в этом случае группа вкладок, есть решение, требующее клонирования, но каждый раз, когда я делаю это, мой UI ломается, так как решение я направляю в группу, используя его ключ в этом случае, я буду делать 'Actions.tabbar ({type: 'reset'})' this будет загружать первую сцену в группе для меня, и это нормально! Приготовлю и отправлю ответ спасибо! –
Любые обновления на этом @DanielBarde? Я сталкиваюсь с тем, что, похоже, является точно такой же проблемой. –