Question

我想从“订单”屏幕导航到“主屏幕”，但他的工作并不很好，路线中的每个屏幕都可以工作，但是主屏幕没有，请回到“地图”屏幕，并且我希望“主屏幕”不显示地图!!我已经告诉他们导航到首页。

这是我正在整理的结构

主页->地图->订单，然后订购->主页

在“主页”中，我在代码下面有侧面菜单“抽屉检查”。

Route.js

[[350. 351. 352. 353. 354. 355], [...]

Order.js

import React, { Component } from 'react';
import {
  View,
  TouchableOpacity,
} from 'react-native';

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

//Import all the screens for Drawer/ Sidebar
import Home from "../screens/Home";
import Splash from "../screens/Splash";
import SignUp from "../screens/SignUp";
import SignIn from "../screens/SignIn";
import ForgetPassword from "../screens/ForgetPassword";
import Order from "../screens/Order";
import MapApp from "../screens/MapApp";
import Profile from "../screens/Profile";


import Icon from 'react-native-vector-icons/Ionicons';

//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
  //Structure for the navigatin Drawer
  toggleDrawer = () => {
    //Props to open/close the drawer
    this.props.navigationProps.toggleDrawer();
  };
  render() {
    return (
      <View style={{ flexDirection: 'row' }}>
        <TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
          <Icon name="md-menu" size={30} color='#fff' style={{ marginLeft: 10 }} />
        </TouchableOpacity>
      </View>
    );
  }
}

// Stack Navigator for app
const AuthStackNavigator = createStackNavigator({
  //All the screen from the Screen1 will be indexed here
  SignUp: {
    screen: SignUp,
    navigationOptions: () => ({
      // header: null
      title: "Sign Up",
      headerLeft: null,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    })
  },
  SignIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Sign In",
      headerRight: <View />,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },
  ForgetPassword: {
    screen: ForgetPassword,
    navigationOptions: {
      title: "Forget Password",
      headerRight: <View />,
      headerTintColor: "#0496FF",
      headerStyle: {
        borderBottomColor: "white"
      },
      headerTitleStyle: {
        color: "#0496FF",
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  },

});

//Stack Navigator for First Option of Navigation Drawer
const HomeDrawer = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerRight: <View />,
      headerStyle: {
        backgroundColor: '#258fdb',
        shadowOpacity: 0,
        elevation: 0,
        marginBottom: 20
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }),
  },
  MapApp: {
    screen: MapApp,
    navigationOptions: {
      title: "Map",
      headerRight: <View />,
      headerLeft: <View />,
      headerTintColor: "#fff",
      headerStyle: {
        backgroundColor: "#258fdb",
        borderBottomColor: "white",
      },
      headerTitleStyle: {
        textAlign: "center",
        flex: 1,
        elevation: 0,
        fontSize: 25,
        justifyContent: "center"
      }
    }
  }
});

//Stack Navigator for Second Option of Navigation Drawer
const OrderDrawer = createStackNavigator({
  Order: {
    screen: Order,
    navigationOptions: ({ navigation }) => ({
      title: 'Order',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
      headerStyle: {
        backgroundColor: '#258fdb',
      },
      headerTintColor: '#fff',
    }),
  },
});
const ProfileDrawer = createStackNavigator({
  Profile: {
    screen: Profile,
    navigationOptions: ({ navigation }) => ({
      title: 'Profile',
      headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,

      headerStyle: {
        backgroundColor: '#258fdb',
      },
      headerTintColor: '#fff',
    }),
  },
})
//Drawer Navigator for the Navigation Drawer / Sidebar
const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeDrawer,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="ios-home" size={30} color='#0496FF' />
      ),
    },

  },
  Order: {
    screen: OrderDrawer,
    navigationOptions: {
      drawerLabel: 'Order',
      drawerIcon: () => (
        <Icon name="ios-list-box" size={30} color='#0496FF' />
      ),
    },
  },
  Profile: {
    screen: ProfileDrawer,
    navigationOptions: {
      drawerLabel: 'Profile',
      drawerIcon: () => (
        <Icon name="ios-contact" size={30} color='#0496FF' />
      ),
    },
  },
});

const Navigations = createSwitchNavigator({
  Authloading: Splash,
  Auth: AuthStackNavigator, // the Auth stack
  App: DrawerNavigator, // the App stack
})

export default MyApp = createAppContainer(Navigations);

Answer 1

您有两条名为“ Home”的路由，一条在HomeDrawer中，一条在DrawerNavigator中。重命名DrawerNavigator中的一个，它应该导航到正确的“主页”。

例如：

HomeDrawer: { // renamed this from Home to HomeDrawer
    screen: HomeDrawer,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <Icon name="ios-home" size={30} color='#0496FF' />
      ),
    },

  },

Answer 2

导出Home.js时，应将其导出（使用Navigation）。

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { withNavigation } from 'react-navigation';

class Home extends Component {
  render() {
    return (
      <View>
        <Text> Home </Text>
      </View>
    )
  }
}

export default withNavigation(Home);

无法导航到自定义屏幕-反应导航？

2 个答案: