标签: stack-navigator

我正在使用该StackNavigator库，但无法弄清楚如何从导航选项中访问道具。

在我的电话课上，我有：

navigate("TestView", { mdata: mdataObject })

在我的 TestView 类中，我有以下内容：

static navigationOptions = {
    title: this.props.navigation.state.params.mdata.title
}

但是，我收到以下错误：

找不到未定义的属性“导航”

我已经确认我可以this.props.navigation.state.params.mdata.title从 componentDidMount() 函数访问，所以那里有数据。

为什么我从 navigationOptions 函数中收到此错误，我该怎么做才能修复它？

另外，我将 navigateOptions 称为一个函数，但不确定是否正确。我应该怎么称呼它？

我想让我的选项卡导航器在视觉上保持以下顺序：“主页”选项卡、“连接”选项卡、“聊天”选项卡

但我希望“连接”选项卡（第二个选项卡）成为应用程序加载时打开的第一个选项卡。我没有找到一种方法可以将其添加到堆栈导航器而不重新排列选项卡的顺序。除了第一个具有以下结构的选项卡之外，是否还有另一种方法可以定位选项卡：

const switchNavigator = createSwitchNavigator({
  LoadingScreen,
  FirstLoginScreen,
  loginFlow: createStackNavigator({
    Main: MainScreen,
    EmailLogin: EmailLoginScreen,
    PhoneLogin: RegisterScreens,
  }),
  mainFlow: createBottomTabNavigator(
    {
      Home: createStackNavigator({
        HomeScreen,
        EditAccountScreen,
        EditPreferencesScreen,
        EditProfileScreen,
        ProfileCardScreen,
      }),
      Connect: ConnectionsScreen,
      Chat: createStackNavigator({
        AllChatScreen,
        SingleChat,
      })
    },
    {
      defaultNavigationOptions: ({navigation}) => ({
        tabBarIcon: ({tintColor}) => {
          const {routeName} = navigation.state;
          if (routeName === "Home") {
            return <MaterialIcons name={"home"} size={20} color={tintColor} />;
          } else if (routeName === "Connect") {
            return <MaterialIcons name={"link"} size={20} color={tintColor} />;
          } else if (routeName === "Chat") { …

我正在尝试从标题按钮导航，但我不能，因为找不到导航变量。

这是我的代码

export const createRootNavigator = (signedIn = false) => {

return StackNavigator(
  {
    SignedIn: {
      screen: SignedIn,
      navigationOptions: {
        gesturesEnabled: false,
        headerStyle,
        headerTintColor: "white",
        headerTitleStyle,
        headerLeft: null,
        headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
                        onPress={() => navigation.navigate({ routeName: 'Notification'})}>
                        <Icon
                          name="md-notifications-outline"
                          size={26}
                          style={{ color: "white" }}/>
                      </TouchableOpacity>,


      }
    },
    SignedOut: {
      screen: SignedOut,
      navigationOptions: {
        gesturesEnabled: false
      }
    },
    Notification: {
      screen: Notification,
      navigationOptions: {
        gesturesEnabled: false
      }
    }
  },
  {
    mode: "modal",
    initialRouteName: signedIn ? "SignedIn" : "SignedOut"
  }
); …

我有4页：App.js，HomeScreen.js，Login.js，Toolbar.js

使用StackNavigator的“我的应用程序”页面：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { StackNavigator, DrawerNavigator } from 'react-navigation';

import Splash from './screens/Splash';
import HomeScreen from './screens/HomeScreen';
import Login from './screens/Login';
import Lobby from './screens/Lobby';
import Wifi from './screens/Wifi';
import Toolbar from './components/ToolBar/Toolbar';
import Mobile from './screens/Mobile';


;

const Navigation = StackNavigator({
  Splash:{screen: Splash},
  HomeScreen:{screen: HomeScreen},
  Login:{screen: Login},
  Lobby:{screen: Lobby},
  Wifi:{screen: Wifi},
  Mobile:{screen:Mobile}
}, {
  mode: 'modal',
  headerMode: 'none'
});


export default Navigation;

我要将工具栏导入到HomeScreen，并希望将导航道具从HomeScreen传递到工具栏，以便可以从工具栏和HomeScreen访问登录页面。 …

我正在使用React Navigation 5+. 他们改变了您配置导航器的方式，我正在尝试在我的程序中实现它。我有一个DrawerNavigator顶级导航器。第一个屏幕是StackNavigator几个屏幕。我正在寻找一种方法来防止用户在除第一个屏幕之外的每个屏幕上滑动抽屉。这是我的导航器文件：

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function CheckinStack() {
    return (
        <Stack.Navigator
            initialRouteName={"Loading"}
            headerMode={"none"}
        >
            <Stack.Screen 
                name={"Search Locations"} 
                component={SearchLocationsScreen} 
                options={{gestureEnabled: true}}
            />
            <Stack.Screen 
                name={"Check In Form"} 
                component={CheckInFormScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Checked In"} 
                component={CheckedInScreen} 
                options={{gestureEnabled: false}}
            />
            <Stack.Screen 
                name={"Business Details"} 
                component={BusinessDetailsScreen} 
                options={{gestureEnabled: false}}
            />
        </Stack.Navigator>
    );
}

function MainDrawer() {
    return (
        <Drawer.Navigator >
            <Drawer.Screen name={"Search Locations"} component={CheckinStack}/>
            <Drawer.Screen name={"About"} component={AboutScreen}/>
            <Drawer.Screen name={"Favorites"} component={FavoritesScreen}/>
            <Drawer.Screen name={"Profile"} component={ProfileScreen}/>
            <Drawer.Screen …

好吧，假设我有四个屏幕：主屏幕、登录屏幕、主页屏幕和项目屏幕。我想要的“用户流程”是：主 -> 登录（登录设置为初始路由） -> 主页 -> 项目。我可以轻松进入主屏幕，但随后收到此消息：我Another exception was thrown: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 4112 pos 12: '!_debugLocked': is not true.找到了很多解决方案，但没有一个有效。最终得到这些代码：

1. 主要的

return MaterialApp(
  title: 'LetBike',
  theme: ThemeData(
    textTheme:
        GoogleFonts.josefinSansTextTheme(Theme.of(context).textTheme),
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  initialRoute: "/",
  routes: {
    "/": (context) => LoginScreen(),
    "ForgotPassword": (context) => ForgotPassword(),
    "CreateNewAccount": (context) => CreateNewAccount(),
    HomePage.routeName: (context) => HomePage(),
    ItemPage.routeName: (context) => ItemPage()
  },
);
}

2. 登录

Navigator.of(context).pushReplacementNamed(
HomePage.routeName,
arguments: snapshot.data);

3. 家

Navigator.of(context)
.pushNamed(ItemPage.routeName, arguments: item);

有任何想法吗？