React native 如何实现堆栈导航&；抽屉导航一起_React Native_React Native Android_React Navigation

React native 如何实现堆栈导航&；抽屉导航一起

react-native

React native 如何实现堆栈导航&；抽屉导航一起,react-native,react-native-android,react-navigation,React Native,React Native Android,React Navigation,Aim-我想创建一个包含3种导航（2种类型）的应用程序反应导航“^3.3.2 Authloading-基本上是一个加载页面，用于在中检查令牌异步存储，并决定是否重定向到AuthStack或 AppStack。 AuthStack-它有登录和注册页面 AppStack-包含一些登录后打开的页面，例如仪表板、配置文件等到目前为止我所取得的成就- 如果用户已登录或未登录，我可以在应用程序加载时执行登录、注销和检查还有什么- 当用户到家/仪表板时，我希望有一个侧菜单/抽屉可以在滑动和按下

Aim-我想创建一个包含3种导航（2种类型）的应用程序

反应导航“^3.3.2

```
Authloading
```
-基本上是一个加载页面，用于在中检查令牌异步存储，并决定是否重定向到
```
AuthStack
```
或
```
AppStack
```
。
- ```
AuthStack
```
  -它有登录和注册页面
- ```
AppStack
```
  -包含一些登录后打开的页面，例如仪表板、配置文件等

到目前为止我所取得的成就-

如果用户已登录或未登录，我可以在应用程序加载时执行登录、注销和检查

还有什么- 当用户到家/仪表板时，我希望有一个侧菜单/抽屉可以在滑动和按下按钮时打开

我尝试了3个文档，但我觉得我太新了，无法理解这一点， Index.js-

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: HomeScreen,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
    headerMode: 'none',
    navigationOptions: {
    headerVisible: false,
   }
  });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

const MyDrawerNavigator = createDrawerNavigator({
  App: AppStack
});

const MyApp = createAppContainer(MyDrawerNavigator);

但是我不能打开抽屉多谢各位

我的index.js文件-

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

 AppRegistry.registerComponent(appName, () => App);

my package.Json文件-

{
  "name": "SM",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.0",
    "react-native-gesture-handler": "^1.1.0",
    "react-navigation": "^3.3.2"
  },
  "devDependencies": {
    "@babel/core": "7.3.4",
    "@babel/runtime": "7.3.4",
    "babel-jest": "24.5.0",
    "jest": "24.5.0",
    "metro-react-native-babel-preset": "0.53.0",
    "react-test-renderer": "16.8.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

试试这个

import React from 'react';
import { createStackNavigator, createSwitchNavigator, createAppContainer, 
createDrawerNavigator } from 'react-navigation';
import Signup from './Screens/Authentication/SignUp';
import SignInScreen from './Screens/Authentication/Login';
import HomeScreen from './Screens/DashBoard/Home';
import AuthLoadingScreen from './Screens/Authentication/AuthLoadingScreen';

const AppStack = createStackNavigator({
  Home: MyDrawerNavigator,
  //  Other: OtherScreen
});

const AuthStack = createStackNavigator({
  SignIn: SignInScreen,
  SignUp: Signup
}, {
  headerMode: 'none',
  navigationOptions: {
  headerVisible: false,
 }
});

export default createAppContainer(createSwitchNavigator(
 {
   AuthLoading: AuthLoadingScreen,
   App: AppStack,
   Auth: AuthStack,
 },
 {
    initialRouteName: 'AuthLoading',
 }
));

const MyDrawerNavigator = createDrawerNavigator({
  Home: HomeScreen
});

下面是一个稍微复杂的示例，其中不同的堆栈导航器添加到抽屉导航器，不同的抽屉导航器添加到底部选项卡导航器

import React from "react";
import { Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createDrawerNavigator,
  createStackNavigator,
  createAppContainer
} from "react-navigation";
import DetailsScreen from "./uicomponents/DetailsScreen";
import HomeScreen from "./uicomponents/home/HomeScreen";
import CategoriesScreen from "./uicomponents/categories/CategoriesScreen";
import HamburgerIcon from "./uicomponents/HamburgerIcon";
import HamburgerIconR from "./uicomponents/HamburgerIconR";
import SideMenu from "./uicomponents/SideMenu";
import { styles } from "./customstyles/Styles";
import { fromRight } from "react-navigation-transitions";

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const MainNavigator = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: ({ navigation }) => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        headerLeft: <HamburgerIcon navigationProps={navigation} />,
        headerRight: <HamburgerIconR navigationProps={navigation} />,
        title: `Recipes`,
        headerBackTitle: "A much too long text for back button from B to A",
        headerBackTitle: null
      })
    },
    Details: {
      screen: DetailsScreen,
      navigationOptions: () => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        title: `Details`,
        headerTintColor: styles.headerTintColor
      })
    },
    Categories: {
      screen: CategoriesScreen,
      navigationOptions: ({ navigation }) => ({
        headerTitleStyle: styles.headerTitleStyle,
        headerStyle: styles.headerStyle,
        headerRight: <HamburgerIconR navigationProps={navigation} />,
        title: `Categories`,
        headerTintColor: styles.headerTintColor
      })
    }
  },
  {
    //initialRouteName: 'Home',
    initialRouteName: "Home",
    transitionConfig: () => fromRight(500)
  }
);

const Drawer = createDrawerNavigator(
  {
    Home: { screen: MainNavigator },
    Regular: { screen: MainNavigator },
    Kitchens: { screen: MainNavigator },
    Restaurants: { screen: MainNavigator },
    Local: { screen: MainNavigator },
    Bookmarks: { screen: MainNavigator },
    Profile: { screen: MainNavigator },
    AboutUs: { screen: MainNavigator },
    PrivacyPolicy: { screen: MainNavigator }
  },
  {
    drawerWidth: 300,
    contentComponent: SideMenu
  }
);

const AppDrawer = createAppContainer(Drawer);

const TabNavigator = createBottomTabNavigator(
  {
    National: { screen: AppDrawer },
    International: { screen: AppDrawer },
    Regional: { screen: AppDrawer },
    Saved: { screen: AppDrawer }
  },
  {
    tabBarOptions: {
      activeTintColor: "yellow",
      inactiveTintColor: "white",
      style: {
        backgroundColor: "#A72428",
        paddingBottom:15
      }
    }
  }
);

const App = createAppContainer(TabNavigator);

export default App;

从“React”导入React；
从“react native”导入{Text，View}；
进口{
CreateBoottomTabNavigator，
createDrawerNavigator，
createStackNavigator，
createAppContainer
}从“反应导航”；
从“/uicomponents/DetailsScreen”导入DetailsScreen；
从“/uicomponents/home/home Screen”导入主屏幕；
从“/ui组件/类别/类别屏幕”导入类别屏幕；
从“/uicomponents/HamburgerIcon”导入HamburgerIcon；
从“/uicomponents/HamburgerIconR”导入HamburgerIconR；
从“/uicomponents/SideMenu”导入侧菜单；
从“/customstyles/styles”导入{styles}；
从“反应导航转换”导入{fromRight}；
类设置屏幕扩展React.Component{
render（）{
返回(
设置！
);
}
}
const MainNavigator=createStackNavigator(
{
主页：{
屏幕：主屏幕，
导航选项：（{navigation}）=>({
headerTitleStyle:styles.headerTitleStyle，
headerStyle:style.headerStyle，
头左：，
头灯：，
标题：`Recipes`，
headerBackTitle：“对于从B到A的后退按钮，文本太长了”，
headerBackTitle:空
})
},
详情：{
屏幕：详细信息屏幕，
导航选项：（）=>({
headerTitleStyle:styles.headerTitleStyle，
headerStyle:style.headerStyle，
标题：`细节'，
HeaderIntColor:styles.HeaderIntColor
})
},
类别：{
屏幕：分类屏幕，
导航选项：（{navigation}）=>({
headerTitleStyle:styles.headerTitleStyle，
headerStyle:style.headerStyle，
头灯：，
标题：`类别'，
HeaderIntColor:styles.HeaderIntColor
})
}
},
{
//initialRouteName:“主页”，
初始路由名称：“主页”，
转换配置：（）=>从右（500）
}
);
const Drawer=createDrawerNavigator(
{
主页：{screen:MainNavigator}，
常规：{屏幕：MainNavigator}，
厨房：{屏幕：MainNavigator}，
餐厅：{屏幕：MainNavigator}，
本地：{屏幕：MainNavigator}，
书签：{screen:MainNavigator}，
配置文件：{screen:MainNavigator}，
AboutUs:{screen:MainNavigator}，
PrivacyPolicy:{screen:MainNavigator}
},
{
抽屉宽度：300，
contentComponent：侧菜单
}
);
const-AppDrawer=createAppContainer（抽屉）；
const TabNavigator=createBottomTabNavigator(
{
国家：{screen:AppDrawer}，
国际：{screen:AppDrawer}，
区域：{screen:AppDrawer}，
已保存：{屏幕：AppDrawer}
},
{
选项卡选项：{
activeTintColor:“黄色”，
颜色：“白色”，
风格：{
背景颜色：“A72428”，
垫底：15
}
}
}
);
const App=createAppContainer（TabNavigator）；
导出默认应用程序；

希望它能帮助你