gpt4 book ai didi

react-native - 如何使用 react 导航推送新场景?

转载 作者:行者123 更新时间:2023-12-05 07:33:45 25 4
gpt4 key购买 nike

我正在创建一个 react-native 应用程序并将其用于导航 react-navigation。

我正在尝试获得以下行为:

有主抽屉菜单,如果我从抽屉导航到一个项目,抽屉应该关闭,导航到场景并为抽屉中的所有项目使用相同的导航栏。在一个项目中,我有一个选项卡导航器。

我在实际实现中唯一的问题是:抽屉没有在项目点击时关闭。有什么建议吗?

如果我从一个场景导航到另一个场景(这个场景不是抽屉项目),我可以导航到那个场景但是我的标题(导航栏)没有改变并且我没有后退按钮。有什么建议吗?

这是我目前所做的,但没有按预期工作。

import React from "react";
import {
createStackNavigator,
createSwitchNavigator,
createDrawerNavigator,
createMaterialTopTabNavigator,
} from "react-navigation";
import { StyleSheet } from "react-native";
import { Icon } from "react-native-elements";
import { AppConfig } from "../constants";
import { AppSizes, AppColors } from "../theme";

import DrawerMenu from "./drawerMenu";
// import DrawerScreen from './DrawerScreen'

// Scenes
import LaunchContainer from "../containers/Launch";
import LoginContainer from "../containers/Login";
import HomeContainer from "../containers/Home";
import RoomsHistoryContainer from "../containers/RoomsHistory";
import LogoutContainer from "../containers/Logout";
import ChatContainer from "../containers/Chat";

const styles = StyleSheet.create({
iconStyle: {
marginLeft: 10,
},
});

const TabStack = createMaterialTopTabNavigator(
{
Conversation: {
screen: RoomsHistoryContainer,
navigationOptions: {
title: "Conversatii",
},
},
Comunitate: {
screen: LaunchContainer,
navigationOptions: {
title: "Comunitate",
},
},
Chatroom: {
screen: LaunchContainer,
navigationOptions: {
title: "Chatroom",
},
},
},
{
tabBarOptions: {
style: {
backgroundColor: AppColors.tabbar.background,
},
activeTintColor: AppColors.tabbar.activeTintColor,
inactiveTintColor: AppColors.tabbar.inactiveTintColor,
indicatorStyle: {
backgroundColor: AppColors.tabbar.indicatorColor,
},
},
}
);

const AppStack = createStackNavigator(
{
Home: { screen: HomeContainer },
Calendar: { screen: LaunchContainer },
Comunitate: {
screen: TabStack,
navigationOptions: { title: "Comunitate" },
},
Logout: { screen: LogoutContainer },
ChatMessage: { screen: ChatContainer },
},
{
headerMode: "float",
navigationOptions: ({ navigation }) => ({
...AppConfig.navbarProps,
title: "My app",
headerLeft: (
<Icon
name="menu"
containerStyle={styles.iconStyle}
color="#fff"
size={30}
onPress={() => navigation.toggleDrawer()}
/>
),
}),
}
);

const DrawerStack = createDrawerNavigator(
{
Main: { screen: AppStack },
},
{
contentComponent: DrawerMenu,
contentOptions: {
activeTintColor: "white",
activeBackgroundColor: "white",
},
drawerWidth: AppSizes.screen.width > 250 ? AppSizes.screen.width - 80 : 250,
}
);

const AuthStack = createStackNavigator(
{
SignIn: {
screen: LoginContainer,
navigationOptions: {
title: "Login",
},
},
SignUp: {
screen: LoginContainer,
navigationOptions: {
title: "Logout",
},
},
},
{
headerMode: "none",
}
);

const AppNavigator = createSwitchNavigator(
{
Launch: { screen: LaunchContainer },
App: { screen: DrawerStack },
Auth: { screen: AuthStack },
},
{
initialRouteName: "Launch",
}
);

export default AppNavigator;

最佳答案

使用导航时关闭抽屉

很简单,在naviagate之前调用drawer close方法。

this.props.navigation.closeDrawer();
this.props.navigation.naviagte('ANOTHER_SCREEN');

在 React Navigation 的页眉上显示 BackButton

BackButton 仅在 pushnavigate 之后显示在 StackNavigation 来自同一 中的另一个屏幕堆栈导航。因此,

  • 检查屏幕的位置。是StackNavigation中的screen组件吗?
  • 它是否从同一 StackNavigation 中的另一个屏幕移入?
  • navigationOptions 中的页眉模式是否正确?

关于react-native - 如何使用 react 导航推送新场景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50417417/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com