Dispatch-Aktion zum Reduce von read-native-Router-Flux-Ereignis

Question

Ich benutze react-native-router-flux und ich weiß nicht, wie eine Redux-Aktion innerhalb der Symbolleiste Aktionen, je nach dem Zustand, wenn der Benutzer wählt eine Aktion aus versenden Wenn der Benutzer beispielsweise angemeldet ist und die Benutzerschaltfläche in der Symbolleiste drückt, sollte er zu seinem Profil navigieren, andernfalls sollte er zum Anmeldebildschirm navigieren.

Dies ist, was ich versucht habe, und es funktioniert, aber es verlangsamt die Anwendung dramatisch (es ist nicht mehr verwendbar), wenn Sie einen Blick auf den Code, was macht eine globale Funktion zu initialisieren und zu setzen zum Redux-Geschäft, damit ich Aktionen mit ihm versenden kann.

'use strict' 
import { Router, Scene, Actions } from 'react-native-router-flux'; 
//redux 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 
import * as actionCreators from '../redux/actions-creators/actions'; 
function mapStateToProps(state) { 
    return { 
    //... 
    } 
} 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators(actionCreators, dispatch); 
} 
const scenes = Actions.create(
    <Scene 
    key="root" 
    onRight={() => { 
       Actions.profile({}); 
      }}> 
    <Scene 
     key="home" 
     component={Home} 
     title="Home" 
     initial={true} /> 
    <Scene 
     key="login" 
     component={LoginScreen} 
     title="Login" /> 
    <Scene 
     key="editProfile" 
     component={EditProfile} 
     title="EditProfile" 
     onRight={() => { 
       Actions.home({}); // this works 
       _logout(); // this is what i need to do, 
       // it calls the function below, 
       // dispatch is not available here, this gets compiled 
       // before the app runs 
       // this.props.logout(); // this is what i need 
       }} /> 
    </Scene> 
); 
var logoutAction =() => {}; // gets assigned to the redux logout action 
function _logout() { 
    logoutAction(); // calls the redux logout action 
} 
class AppNavigator extends React.Component { 
    constructor(props) { 
    super(props); 
    } 
    componentDidMount() { 
    logoutAction = this.props.logout; // this "hack" breaks performance 
    BackAndroid.addEventListener('hardwareBackPress', function() { 
     Actions.pop({}); 
     return true; 
    }); 
    } 
    render() { 
    return <Router scenes={scenes} /> 
    } 
} 
const MainNavigator = connect(mapStateToProps, mapDispatchToProps)(AppNavigator); 
export default MainNavigator; 

Ich brauche den richtigen Weg zu finden, dies zu tun, wie in Dispatch Aktionen bilden die onRight={() => { ...here... }); Methode in der Szene

Eine andere Sache, ich war versucht, die Szene Definitionen in der render() Methode zu setzen, aber die app läuft viel langsamer, diese methode der definitionen außerhalb macht die app viel schneller laufen, aber es wird mir nicht erlauben, dies zu nennen.props, weil dies nicht definiert ist.

Answer 1

Ungeprüfte so nicht sicher, ob dies funktionieren wird, aber es ein Schuss. Ich benutze auch RNRF, aber ich benutze nicht die onRight Prop. Ich verwende normalerweise eine benutzerdefinierte Navigationsleiste und passiere Aktionen dazu.

// pass the action as a prop (not sure of your logout action's location) 
function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    logout: actions.auth.logout 
    }, dispatch); 
} 
// then for onRight the action can be referenced as 
onRight={() => { this.props.logout() }} 

Answer 2

<Scene 
    key="dashBoard" 
    component={DashBoard} 
    type="reset" 
    renderTitle={() => 
    <View style={Styles.renderTitleStyle}> 
     <Image source={Images.logo}/> 
    </View> } 
    onRightButton={() => console.log('print')} 
    renderRightButton={() => 
     <TouchableOpacity onPress={() => this.logOut()}> 
     <Icon name="md-power" color="#FFFFFF" style={{fontSize: 25, top: 0}}/> 
     </TouchableOpacity> 
    } 
/> 

// ====== >>

logOut(){ 
console.log('logout'); 
}