반응 네이티브 라우터 플럭스 이벤트에서 환원 조치를 보내십시오.

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... }); 방법을 형성 파견 활동과 같이이 작업을 수행 할 수있는 올바른 방법을 찾을 필요 앱이 훨씬 느리게 실행되기 때문에 정의를 정의하는이 메서드는 앱을 훨씬 빠르게 실행하게하지만 this.props를 호출 할 수 없습니다. 이는 정의되지 않았기 때문입니다.

Answer 1

테스트되지 않았으므로 제대로 작동하지 않을지 확실하지 않습니다. 나는 또한 RNRF를 사용하지만 onRight 소품을 사용하지 않습니다. 나는 보통 사용자 정의 navbar를 사용하고 그에 대한 조치를 전달합니다.

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

는