調度行動以減少來自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事件

回答

相關問題