标签: react-navigation-stack

我正在使用导航来导航我的本机应用程序，但我无法支付此问题。我按照文档做了，但对我没有任何作用。

问题是我正在尝试使用导航选项添加标题和右键按钮将我导航到另一个屏幕，但它一直给我这个错误：“navigation.navigate 不是一个函数。（在 navigation.navigate 中是未定义的)

这是我的代码：

    static navigationOptions = (navigation) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

谢谢你

我正在使用 React-Navigation V4，问题是，是否有任何方法可以仅延迟加载特定选项卡，例如我有四个选项卡并且我想在选项卡组件初始化后加载两个选项卡并且不想加载其他两个这些选项卡两个只会在用户激活它们时加载。如果我lazy: true在 React 中使用它，它会在所有选项卡上工作，或者延迟加载将被全部禁用或全部启用。

开始：

<NavigationContainer>
      <Stack.Navigator>
        {
          isLoading ? <Stack.Screen name="AuthLoadingScreen" component={AuthLoadingScreen} />
          : (
          user ? (
            <Stack.Screen  name="AuthenticatedStack" component={AuthenticatedStack} options={{headerShown: false}} />
            ) : (
              <Stack.Screen  name="NotAuthenticatedStack" component={NotAuthenticatedStack} options={{headerShown: false}} />
            )
          )
        }
      </Stack.Navigator>
    </NavigationContainer>

认证堆栈：

const AuthenticatedStack = () => {
  return (
    <Drawer.Navigator initialRouteName="MainStack" drawerContent={props => <SideBar {...props} />}>
        <Stack.Screen name="MainStack" component={MainStack} options={({route}) => ({
            headerShown: shouldHeaderBeShown(route),title: getHeaderTitle(route),
          })} />
      </Drawer.Navigator>
  );
};

主堆栈包含带有选项卡导航器和其他导航器的主屏幕，我计划从侧面菜单按钮导航到这些导航器：

const MainStack = () => {
  return (
    <Stack.Navigator>
          <Stack.Screen name="main" component={MainTabNavigator} options={({route}) => …

我在 React Native 应用程序中使用 React Navigation 3.11，我想自定义堆栈导航中的后退按钮。在文档中它说：

标题背景图片

React 元素或组件以在标题的后退按钮中显示自定义图像。当一个组件被使用时，它在渲染时会收到一些 props (tintColor, title)。默认为带有 react-navigation/views/assets/back-icon.png 后退图像源的 Image 组件，这是平台的默认后退图标图像（iOS 上为 V 形，Android 上为箭头）。

这是我的配置：

let navigationRouteConfigMap : NavigationRouteConfigMap = {
      _main:
      {screen: page, navigationOptions: 
        { 
          [...]
          headerBackTitle: '',
          headerTruncatedBackTitle: '',
          headerBackImage: Images.backArrow,
        }
      }

    }
    let stackNavigatorConfig:StackNavigatorConfig = {
      headerBackTitleVisible: false
    }

    return createStackNavigator(navigationRouteConfigMap, stackNavigatorConfig)

我的配置中还有其他页面，所有页面都具有相同的共享导航选项和自定义标题背景图像。但是，在我的应用程序中，它呈现默认的后退箭头。（headerBackTitleVisible: false虽然有效）

我究竟做错了什么？

嘿，我在使用多个Stack.Navigator时遇到透明度问题。

我创建了 2 个Stack.Navigators -> 一个用于Screens，一个用于Popups。问题是，我的弹出窗口具有透明背景，在这种情况下，我需要在背景中显示屏幕。它在 react.navigation v4 中工作，现在在 v5 中我找不到任何解决方案来解决这个问题。

零食 https://snack.expo.io/@m.jachym/react-navigation-stacks-transparency

导航结构 img

*有两个Stack.Navigator s，因为Stack.Navigator for Popups有不同的和更复杂的screenOptions。此外，在有关嵌套导航器的文档中，建议将一个Stack.Navigator放在另一个中。在这种情况下，问题是，当您设置父级Stack.Navigator headerMode="screen" 和子级Stack.Navigator headerMode="none" 时，子级的 headerMode 是从父级继承的。其他属性也存在同样的问题 - 这就是为什么我的导航结构保持原样的原因。

我知道我做错了什么，或者这就是新版本的 react-navigation 的问题，我应该写信给 react-navigation 团队吗？*

我有 3 个选项卡，每个选项卡都包含一组堆栈导航器。

1. 家庭堆栈

    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = ({navigation, route}) => {
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component={Home}
          />
          <HomeNavigator.Screen
            name="Profile"
            component={Profile}
          />
          <HomeNavigator.Screen
            name="Settings"
            component={Settings}
          />
        </HomeNavigator.Navigator>
      );
    };

2. 存储堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = ({navigation, route}) => {
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component={Store}
          />
        </StoreNavigator.Navigator>
      );
    };

3. 社区堆栈

    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = ({navigation, route}) => {
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component={Community}
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component={CommunityReply}
            options={communityReplyOptions}
          />
          <CommunityNavigator.Screen …

堆栈导航时，mode="card" 或 mode="modal" 均不起作用。在 OnePlus 5T 和 Android Studio(Google Pixel) 中测试

在 Android 和 IOS 上，默认的 Stack Navigator 模式是“card”，但在测试时，会发生简单的导航转换。即使指定了 mode="card" 或 mode="modal" 后，导航时仍然不会显示对转换的影响。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';


const First=({navigation})=>{
  return (
    <>
    <Text>First Page</Text>
    <Button title="Second Page" onPress={()=>navigation.navigate("Second")}/>
    </>);
}


const Second=()=>{
  return (
    <Text>Second Page</Text>);
}


const Stack=createStackNavigator();

const StackNavigate=()=>{
  return (
  <Stack.Navigator mode='modal'>
    <Stack.Screen name="First" component={First}/>
    <Stack.Screen name="Second" …

这是我的堆栈导航器

这是我的抽屉导航器

问题是堆栈导航器屏幕 2 中的抽屉导航器标头 - [name='Details',component='Anote']，
我想从下图中删除抽屉导航器 [即。标题为[Notes Maker]]的一个

在我的反应本机项目中，我正在使用库

"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",

我有嵌套的导航器，如下所示：

// root level I have a stack navigator where it contains two screens, `Home` and `Settings`.
const App = ()=> {
  const rootStack = createStackNavigator();
  return (
    <NavigationContainer>
      <rootStack.Navigator>
        <rootStack.Screen name="Home" component={Home} />
        <rootStack.Screen name="Settings" component={Settings} />
      </rootStack.Navigator>
    </NavigationContainer>
  );
}

// The Settings screen is a nested stack navigator
const Settings = ()=> {
  const settingsStack = createStackNavigator();
  return (
    <settingsStack.Navigator>
      <settingsStack.Screen name="SettingsOne" component={SettingsOneScreen} />
      <settingsStack.Screen name="SettingsTwo" component={SettingsTwoScreen} />
    </settingsStack.Navigator>
  );
}

正如您所看到的，“设置”屏幕实际上是另一个级别（嵌套）堆栈导航器。 …

我无法让堆栈导航器响应本机工作。我只是制作空白堆栈导航器以进入bottomTabsNavigator。我收到一个关于使用 route.key 的错误。即使我制作了一个简单的 Stack 导航器，我仍然会收到此错误，并且似乎在网上的任何地方都看不到任何提及。任何帮助将不胜感激:)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

import Icon from 'react-native-vector-icons/MaterialIcons';
import CartScreen from './screens/CartScreen'
import RecipeScreen from './screens/RecipeScreen'
import ProfileScreen from './screens/ProfileScreen'

const Stack = createStackNavigator();


function Navigator() {

    return (

        <NavigationContainer>

            <Stack.Navigator
                screenOptions={({ route }) => ({
                    headerStyle: {
                        backgroundColor: 'salmon',
                    },
                    headerTintColor: 'white',
                    headerTitleStyle: {
                        fontWeight: 'bold',
                    },
                })}
                tabBarOptions={{
                    showLabel: false,
                    activeTintColor: 'white',
                    inactiveTintColor: …