在我的应用中,我有一些按钮可以导航到其他屏幕,还有一个抽屉也有一些按钮, 我做了抽屉,它工作正常,也做了堆栈导航,也工作正常,但是在我的app.js中,当我定义其中一个(抽屉或堆栈)中的另一个不起作用时,我将提供我的代码,我认为是问题所在是我分别为它们声明了createAppContainer,如何将它们结合在一起? 这是我的代码:
Root.js:
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Main from "./Main.js";
import Signup from "./Signup.js";
import Home from "./Home.js";
import CardDetails from "./CardDetails";
import Profile from "./Profile";
const MainNavigator = createStackNavigator(
{
Main: { screen: Main },
Profile: { screen: Profile },
Signup: { screen: Signup },
Home: { screen: Home },
CardDetails: { screen: CardDetails },
},
{
initialRouteName: "Main",
navigationOptions: {
header: null
},
initialRouteParams: {
navigationMode: true
}
}
);
const Root = createAppContainer(MainNavigator);
export default Root;
DrawerNavigator.js:
import React from "react";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";
import MyProduct from "../Containers/MyProduct";
import Home from "../Containers/Home";
import Profile from "../Containers/Profile";
import Main from "../Containers/Main";
import Signup from "../Containers/Signup.js";
import MenuDrawer from "../Components/MenuDrawer";
const { width, height } = Dimensions.get("window");
const DrawerConfig = {
drawerWidth: width * 0.83,
contentComponent: ({ navigation }) => {
return <MenuDrawer navigation={navigation} />;
}
};
export const DrawerNavigator = createDrawerNavigator(
{
MyProduct: {
screen: MyProduct
},
Profile: {
screen: Profile
},
Main: {
screen: Main
},
Home: {
screen: Home
},
},
{initialRouteName:'Main'},
DrawerConfig
);
export default createAppContainer(DrawerNavigator);
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from "react";
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar
} from "react-native";
// import { Provider } from 'react-redux';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions
} from "react-native/Libraries/NewAppScreen";
import Main from './src/Containers/Main.js'
import Login from './src/Containers/Login.js'
import Signup from './src/Containers/Signup.js'
import Home from './src/Containers/Home.js'
import CardDetails from './src/Containers/CardDetails'
import AddMobile from './src/Containers/AddMobile'
import Profile from './src/Containers/Profile'
import MyProduct from './src/Containers/MyProduct'
import Root from './src/Containers/Root'
import DrawerNavigator from './src/Navigation/DrawerNavigator';
import Navigators from './src/Navigation/Navigators';
import MenuButton from "./src/Components/MenuButton.js";
const App: () => React$Node = () => {
return (
// <DrawerNavigator /> /// here the drawer works fine but stack navgation not working
<Root /> ////here stacknavigations work fine but I got an error when I press drawer icon. Error screenshot pasted in the end.
);
};
const styles = StyleSheet.create({
});
export default App;
答案 0 :(得分:0)
您可以通过这种方式尝试。
const DrawerNavigators = createDrawerNavigator({
//Drawer Optons and indexing
Main: {
screen: HomeActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Dashboard',
}
}
});
const NonDrawerNavigators = createStackNavigator({
TaskView: {
screen: TaskView,
navigationOptions: {
title: 'Task',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
},
TeamView: {
screen: TeamView,
navigationOptions: {
title: 'Team',
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff'
}
}
}, {headerLayoutPreset: 'center'});
const AppNavigator = createStackNavigator({
drawerStack: {
screen: DrawerNavigators,
navigationOptions: {
header: null
}
},
nonDrawerStack: {
screen: NonDrawerNavigators,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(createSwitchNavigator({
SplashScreen: SplashScreen,
loginStack: LoginNavigator,
homeStack: AppNavigator
}, {
initialRouteName: 'SplashScreen'
})
);