Операция отправки для уменьшения из события реакции-native-router-flux

Question

Я использую react-native-router-flux, и я не знаю, как отправить действие redux из действий панели инструментов в зависимости от состояния, когда пользователь выбирает действие из на панели инструментов, например, если пользователь вошел в систему и нажал кнопку пользователя на панели инструментов, он должен перейти к своему профилю, иначе он должен перейти к экрану входа.

Это то, что я пробовал, и он работает, но он сильно замедляет приложение (его больше нельзя использовать), если вы посмотрите на код, что происходит, это инициализация «глобальной» функции и ее установка к магазину redux, поэтому я могу отправлять действия, используя его.

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

Мне нужно найти правильный способ сделать это, как и в диспетчерских действий образуют метод onRight={() => { ...here... }); в сюжетном

Другой вещью, которую я попытался было поставить определение Scene внутри метода визуализации(), но приложение работает намного медленнее, этот метод определения определений снаружи делает приложение работать намного быстрее, но он не позволит мне вызывать this.props, потому что это не определено.

Answer 1

Не проиндексирован, поэтому не уверен, что это сработает, но сделайте снимок. Я также использую RNRF, но я не использую onRight prop. Обычно я использую пользовательскую навигационную панель и передаю ее.

// 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'); 
}