反应导航-pop（）返回根目录而不是上一页

时间：2019-04-01 16:17:57

标签： reactjs react-native react-navigation

我正在尝试将后退按钮添加到定制的侧面菜单组件中。

这是我的navigation.js设置：

import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
import App from '../components/App';
import HomeView from '../components/HomeView';
import CheckIn from '../components/CheckIn';
import LoginView from '../components/LoginView';
import LrmDocs from '../components/LrmDocs';
import Rota from '../components/Rota';
import SideMenu from '../components/util/SideMenu';



const InitStack = createStackNavigator({
  AppContainer: App,
  LoginViewContainer:LoginView,
});


const RootStack = createDrawerNavigator({
  Auth:InitStack,

  HomeViewContainer: HomeView,
  RotaContainer: Rota,
  CheckInContainer:CheckIn,
  LrmDocsContainer: LrmDocs,
},
{
  drawerPosition: 'right',
  contentComponent: SideMenu,
  cardStyle: { backgroundColor: '#FFFFFF'},
  drawerLockMode: 'locked-closed'

}
);


let Navigation = createAppContainer(RootStack);

export default Navigation;

我的定制侧面菜单中有以下设置- 

mport React, {Component} from 'react';
import CopyrightSpiel from './CopyrightSpiel';
import {ScrollView, Text, View, StyleSheet, Image, Button, TouchableOpacity} from 'react-native';
import { withNavigation } from 'react-navigation';
import { connect } from "react-redux";

import { authLogout, clearUser } from "../../store/actions/index";

class SideMenu extends Component {
  constructor(props) {
    super(props);
    this.state = { loggedIn:false};
  }

  logOutHandler = () => {

    this.props.onTryLogout();
    this.props.clearUser();
    this.props.navigation.navigate('AppContainer');
  };

  render() {
    const isLoggedIn = () => {
      if(this.state.loggedIn){

        return true;
      }
      else {return false; }
    };
    let cp = this.props.activeItemKey;

    let getCurrentCoordinates = (pg) => {
      if(cp === pg){
        return true;
      }
    };

    return (
      <View style={styles.container}>

        <ScrollView>
          <View style={styles.header}>
            <View style={styles.closeBtnWrap}>
              <TouchableOpacity
                onPress={() => this.props.navigation.toggleDrawer() }
              >
                <Image
                  style={styles.closeBtnImg}
                  source={require('../../images/icons/ico-close.png')}
                />

              </TouchableOpacity>
            </View>


            <View style={styles.logoBlock}>
              <Image style={styles.homeBlockImg} source={require('../../images/loginLogo.png')} />
            </View>

          </View>
          <View style={styles.navSection}>

            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('HomeViewContainer')}
            >
              <View style={[styles.navSectionStyle, getCurrentCoordinates('HomeViewContainer') && styles.navItemSel]}>
                <Text style={styles.navItemStyle}>
                HOME
                </Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('RotaContainer')}
            >
              <View style={[styles.navSectionStyle, getCurrentCoordinates('RotaContainer') && styles.navItemSel]}>
                <Text style={styles.navItemStyle} >
                MY ROTA
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('LrmDocsContainer')}
            >
              <View style={[styles.navSectionStyle, getCurrentCoordinates('LrmDocsContainer') && styles.navItemSel]}>
                <Text style={styles.navItemStyle} >
                LRM DOCS
                </Text>
              </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.logOutHandler}>
              <View style={styles.navSectionStyle}>
                <Text style={styles.navItemStyle} >
                SIGN OUT
                </Text>
              </View>
            </TouchableOpacity>
          </View>

          <View style={styles.navSection}>

            <Text style={styles.navSectionTitle}>Current Shift Options:</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('CheckInContainer')}
            >
              <View style={[styles.navSectionStyle, isLoggedIn() && styles.checkedInHide, getCurrentCoordinates('CheckInContainer') && styles.navItemSel]}>
                <Text style={styles.navItemStyle} >
                CHECK IN
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('CheckInContainer')}
            >
              <View style={[styles.navSectionStyle, !(isLoggedIn()) && styles.checkedOutHide, getCurrentCoordinates('CheckInContainer') && styles.navItemSel]}>
                <Text style={styles.navItemStyle} >
                CHECK OUT
                </Text>
              </View>
            </TouchableOpacity>

          </View>
        </ScrollView>
        <View style={styles.footerContainer}>
          <CopyrightSpiel color="LightGrey"/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header:{
    flexDirection:'row',

    justifyContent:'center',
  },
  closeBtnWrap:{
    position:'absolute',
    left:15,
    top:0,
    opacity:0.8,
  },
  closeBtnImg:{
    width:22,
    height:22

  },
  container:{
    backgroundColor:'#1C2344',
    alignSelf:'stretch',
    flex:1,
    paddingTop:50,
    borderLeftColor:'#F7931E',
    borderLeftWidth:1
  },
  logoBlock:{
    alignSelf:'center',

  },

  homeBlockImg:{
    marginTop:10,
    width:60,
    height:105,

  },
  navSectionStyle:{
    alignItems:'stretch',
    textAlign: 'center',
    backgroundColor:'rgba(255,255,255,0.1)',
    paddingTop:8,
    paddingBottom:8,
    marginTop:15,
  },
  navItemSel:{
    backgroundColor:'rgba(255,255,255,0.9)',
  },
  navItemSelText:{
    color:'#1C2344',
  },
  navItemStyle:{
    color:'#F7931E',
    fontSize:24,
    alignSelf:'center'

  },
  navSection:{
    marginTop:30

  },
  navSectionTitle:{
    color:'rgba(255,255,255,0.5)',
    marginLeft:15,

  },
  footerContainer:{
    paddingBottom:15,
  },
  checkedInHide:{
    display:'none',
  },
  checkedOutHide:{
    display:'none',
  },

});

const mapDispatchToProps = dispatch => {
  return {
    onTryLogout: () => dispatch(authLogout()),
    clearUser: () => dispatch(clearUser())
  };
};

export default connect(null, mapDispatchToProps)(withNavigation(SideMenu));

效果很好-

然后我的子视图标题中包含以下内容：

    import React from 'react';
import {View, Image, Text, StyleSheet, TouchableOpacity, Button} from 'react-native';
import PropTypes from 'prop-types';
import { withNavigation } from 'react-navigation';
import { StackActions } from 'react-navigation';



class FixedHeader extends React.Component {
  render() {
    const popAction = StackActions.pop({
      n: 0,
    });
    return (

      <View style={FixedHeaderStyles.sectionHeader}>
        <View style={FixedHeaderStyles.sectionHeaderTopLine}>
          <View style={[FixedHeaderStyles.sectionHeaderBack, !(this.props.backButton) && FixedHeaderStyles.sectionHeaderHide ]}>



            <TouchableOpacity
              onPress={() =>   this.props.navigation.dispatch(popAction)}
            >
              <Text style={FixedHeaderStyles.sectionHeaderText}>&#x3c; Back</Text>
            </TouchableOpacity>
          </View>
          <View style={FixedHeaderStyles.logoBlock}>
            <Image style={FixedHeaderStyles.homeBlockImg} source={require('../../images/logosmall.png')} />
          </View>
          <View style={FixedHeaderStyles.homeBlockBurger} >

            <TouchableOpacity  onPress={() => this.props.navigation.toggleDrawer() }>

              <Image
                style={FixedHeaderStyles.homeBurgerImg}
                source={require('../../images/icons/ico-burger.png')}
              />

            </ TouchableOpacity>
          </View>
        </View>

      </View>
    );
  }
}

FixedHeader.propTypes = {
  backButton: PropTypes.bool.isRequired,
  navigate: PropTypes.object,
};

const FixedHeaderStyles = StyleSheet.create({
  sectionHeadeLogo:{

    width:45,
    height:58,
    alignSelf:'center'

  },
  sectionHeader:{
    backgroundColor:'#1C2344',
    flex:1.8,
    alignSelf:'stretch',
    borderBottomColor:'#f79431',
    borderBottomWidth:1,
  },
  sectionHeaderTopLine:{
    height:120,
    paddingTop:45,
    borderBottomColor:'#f79431',
    borderBottomWidth:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },

  homeBlockBurger:{
    position:'absolute',
    right:0,
    marginRight:15,
    top:56
  },
  logoBlock:{
    alignSelf:'flex-start',
  },
  homeBlockImg:{
    width:45,
    height:58,
    alignSelf:'center',

  },
  homeBurgerImg:{
    width:40,
    height:40,
  },
  sectionHeaderHide:{
    display:'none',

  },
  sectionHeaderBack:{
    position:'absolute',
    left:15,
    top:70,
  },
  sectionHeaderText:{
    color:'#fff',
  },


});


export default withNavigation(FixedHeader);

该页面可以很好地导航到子视图-但是按回去时，页面跳转到根（登录页面）而不是上一页。例如-我从家里导航到旋转菜单，单击返回并跳回登录..任何人都可以对此进行任何照明，并向我指出正确的方向-我已经阅读了文档，但无法弄清楚出了什么歧途...

我的依赖关系如下：

enter image description here

3 个答案:

答案 0 :(得分：0)

由于您正在使用withNavigation HOC，因此需要在navigation组件中使用FixedHeader道具，而不是调用StackActions.pop。您只需致电this.props.navigation.pop()。

https://reactnavigation.org/docs/en/navigation-prop.html#navigator-dependent-functions

答案 1 :(得分：0)

您不应该在FixedHeader类中定义索引为0的popAction。

const popAction = StackActions.pop({
      n: 0,
    });

代替尝试

const popAction = StackActions.pop();
  

pop操作将您带回到堆栈中的上一个屏幕。

     

n 参数可让您指定弹出多少个屏幕   

请参考以下文档：https://reactnavigation.org/docs/en/stack-actions.html#pop

除此之外，您最好在const popAction = ...方法之外定义render()。 

import React from 'react';
import {View, Image, Text, StyleSheet, TouchableOpacity, Button} from 'react-native';
import PropTypes from 'prop-types';
import { withNavigation } from 'react-navigation';
import { StackActions } from 'react-navigation';

const popAction = StackActions.pop(); 
class FixedHeader extends React.Component {

  render() {
    return (

      <View style={FixedHeaderStyles.sectionHeader}>
        <View style={FixedHeaderStyles.sectionHeaderTopLine}>
          <View style={[FixedHeaderStyles.sectionHeaderBack, !(this.props.backButton) && FixedHeaderStyles.sectionHeaderHide ]}>



            <TouchableOpacity
              onPress={() =>   this.props.navigation.dispatch(popAction)}
            >
              <Text style={FixedHeaderStyles.sectionHeaderText}>&#x3c; Back</Text>
            </TouchableOpacity>
          </View>
          <View style={FixedHeaderStyles.logoBlock}>
            <Image style={FixedHeaderStyles.homeBlockImg} source={require('../../images/logosmall.png')} />
          </View>
          <View style={FixedHeaderStyles.homeBlockBurger} >

            <TouchableOpacity  onPress={() => this.props.navigation.toggleDrawer() }>

              <Image
                style={FixedHeaderStyles.homeBurgerImg}
                source={require('../../images/icons/ico-burger.png')}
              />

            </ TouchableOpacity>
          </View>
        </View>

      </View>
    );
  }
}

FixedHeader.propTypes = {
  backButton: PropTypes.bool.isRequired,
  navigate: PropTypes.object,
};

const FixedHeaderStyles = StyleSheet.create({
  sectionHeadeLogo:{

    width:45,
    height:58,
    alignSelf:'center'

  },
  sectionHeader:{
    backgroundColor:'#1C2344',
    flex:1.8,
    alignSelf:'stretch',
    borderBottomColor:'#f79431',
    borderBottomWidth:1,
  },
  sectionHeaderTopLine:{
    height:120,
    paddingTop:45,
    borderBottomColor:'#f79431',
    borderBottomWidth:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },

  homeBlockBurger:{
    position:'absolute',
    right:0,
    marginRight:15,
    top:56
  },
  logoBlock:{
    alignSelf:'flex-start',
  },
  homeBlockImg:{
    width:45,
    height:58,
    alignSelf:'center',

  },
  homeBurgerImg:{
    width:40,
    height:40,
  },
  sectionHeaderHide:{
    display:'none',

  },
  sectionHeaderBack:{
    position:'absolute',
    left:15,
    top:70,
  },
  sectionHeaderText:{
    color:'#fff',
  },


});

export default withNavigation(FixedHeader);

欢呼

答案 2 :(得分：0)

经过一番摸索和搜索后-我找到了解决我问题的方法-我的问题是我使用的是抽屉式导航，而不是堆栈导航-弹出式窗口对抽屉不可用，因为没有可使用的堆栈-

ref-https://reactnavigation.org/docs/en/navigation-prop.html

答案来自-https://github.com/react-navigation/react-navigation/issues/4793

相关问题
最新问题