Question

使用反应导航3并同时使用

this.props.navigation.navigate(item.navigationPath)

浏览页面

问题是，当我单击导航栏中的按钮后退时，它不会后退我希望它返回1步，但它什么也没做

这是后部组件

    class NavigationBack extends Component  {
    toggleDrawer = () => {
    this.props.navigation.goBack()
  };
    render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

当我在Home-> Category-> Single-Category中时然后按下硬件后退按钮，它将我带到“首页”而不是“类别”

这是小吃的链接 https://snack.expo.io/@ov3rcontrol/navi

Answer 1

我尝试了您的代码并进行了一些修改。您可以检查此代码吗？这是您需要的吗？

/*Example of Navigation Drawer with Sectioned Menu*/
import React, { Component } from 'react';
import {
  StyleSheet,
  Platform,
  View,
  Text,
  Image,
  TouchableOpacity,
  YellowBox,
  Dimensions,
  Button,
} from 'react-native';

//Import required react-navigation component
import {
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

//Import all the screens
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
import category from './pages/category';
import singleCategory from './pages/singleCategory';

//Import custom Drawer / sidebar
import SideMenu from './sidemenu';

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  toggleDrawer = () => {
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          {/*Donute Button Image */}
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

class NavigationBack extends Component  {
    toggleDrawer = () => {
    this.props.navigation.goBack()
  };
    render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Image
            source={require('./image/drawer.png')}
            style={{ width: 25, height: 25, marginLeft: 5 }}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

//Stack Navigator for the First Option of Navigation Drawer
const FirstActivity_StackNavigator = createStackNavigator({
  //All the screen from the First Option will be indexed here
  First: {
    screen: Screen1,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 1',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//Stack Navigator for the Second Option of Navigation Drawer
const Screen2_StackNavigator = createStackNavigator({
  //All the screen from the Second Option will be indexed here
  Second: {
    screen: Screen2,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 2',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});

//Stack Navigator for the Third Option of Navigation Drawer
const Screen3_StackNavigator = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  Third: {
    screen: Screen3,
    navigationOptions: ({ navigation }) => ({
      title: 'Demo Screen 3',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#FF9800',
      },
      headerTintColor: '#fff',
    }),
  },
});


const category_nav = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  cat: {
    screen: category,
    navigationOptions: ({ navigation }) => ({
      title: 'Makeup Artist',
      headerLeft: <NavigationBack navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: 'grey',
      },
      headerTintColor: '#fff',
    }),
  },
});

const single_category_nav = createStackNavigator({
  //All the screen from the Third Option will be indexed here
  single_cat: {
    screen: singleCategory,
    navigationOptions: ({ navigation }) => ({
      title: 'Mahmoud Makup',
      headerLeft: <NavigationBack navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: 'grey',
      },
      headerTintColor: '#fff',
    }),
  },
});
//Drawer Navigator for the Navigation Drawer / Sidebar
const Drawers = createStackNavigator({
  NavScreen1: { screen: FirstActivity_StackNavigator },
    NavScreen2: { screen: Screen2_StackNavigator },
    NavScreen3: { screen: Screen3_StackNavigator },
    category: {screen: category_nav},
    single_category: {screen: single_category_nav}
},{
  headerMode: 'none'
})
const DrawerStack = createDrawerNavigator(
  {
    drawerScreens: Drawers
  },
  {
    contentComponent: (props) => (
      <SideMenu {...props}/>
    ),
    drawerWidth: Dimensions.get('window').width - 120,
  }
);

const RootStack = createStackNavigator({
  root: DrawerStack
},{
  headerMode: "none"
});

export default createAppContainer(RootStack);

React Native Navigation GoBack无法正常工作

1 个答案: