调度行动以减少来自react-native-router-flux事件

我使用的是react-native-router-flux，我不知道如何从工具栏操作中调度redux操作，具体取决于用户从操作中选择操作的状态工具栏，例如如果用户登录并按下工具栏中的用户按钮，它应该导航到他的个人资料，否则应该导航到登录屏幕。调度行动以减少来自react-native-router-flux事件

这是我尝试过的，它可以工作，但它大大减慢了应用程序的速度（它不再可用），如果你看看代码，那么做什么是初始化一个“全局”函数并设置它到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... });方法在场景

我想另一件事是把渲染（）方法中的场景定义，但是应用运行速度要慢得多，这种定义外部定义的方法使应用运行得更快，但它不会让我调用this.props，因为这是未定义的。

来源

2016-07-28 octohedron

未经测试，所以不知道这是否会工作，但给它一个镜头。我也使用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() }}

来源

2016-07-29 01:50:23

截至重构了整个事情，不能接受你的答案，因为它不工作，要修复它一点点？ ty – octohedron

如何在静态方法中获得'this.props'？ @加兹塔，你能否详细说明你改变了什么，让它起作用或者写下自己的答案并接受它？ –

你好@IrisSchaffer，我放弃了这个方法，现在我正在使用Drawer，并将场景移回到渲染方法中，这会授予您对道具的访问权限，为了性能原因我已经在组件之外声明了它们，但现在它工作正常。只需像通常一样将您的导航器组件与redux连接起来，然后用提供程序包装它，它可能会抛出一些“已定义的键”，但您不必担心它，请告诉我它是否有效。 – octohedron

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

来源

2016-12-26 12:50:19 Manjeet

调度行动以减少来自react-native-router-flux事件

回答

相关问题