从 react-native-router-flux 事件调度操作到 redux

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... }); 方法中的调度操作

我尝试的另一件事是将场景定义放在 render() 方法中，但应用程序运行速度要慢得多，这种在外部定义定义的方法使应用程序运行得更快，但它不允许我调用this.props，因为这是未定义的。

Answer 1

未经测试，因此不确定这是否可行，但请试一试。我也使用 RNRF，但我不使用 onRight 道具。我通常使用自定义导航栏并将操作传递给它。

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