标签: react-navigation-stack

我有3个屏幕上StackNavigator：MainSearch，MonsterPage，ItemPage。我想堆叠MonsterPage和ItemPage多次（从MonsterPage你可以去，ItemPage反之亦然）

可以实例化屏幕吗？

const AppNavigator = createStackNavigator(
    {
        Home: MainSearch,
        MonsterPage: MonsterPage,
        ItemPage: ItemPage
    },
    {
        initialRouteName: "Home"
    }
);

export default createAppContainer(AppNavigator);

我想要的是：

MainSearch -> ItemPage(1) -> MonsterPage(1) -> ItemPage(2) -> 等等...

或者

MainSearch -> MonsterPage(1) -> ItemPage(1) -> MonsterPage(2) -> 等等...

我得到的：

MainSearch -> MonsterPage(1) -> ItemPage(1) ->(返回) MonsterPage(1)

Gif 显示会发生什么

主搜索

onPress={() => { this.props.navigation.navigate(`${r._source.super_cat === 'monster' ? 'MonsterPage' : 'ItemPage'}`, …

我想将一些道具（值）传递到另一个页面，我正在使用stackNavigator

应用程序.js：

import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";

const Stack = createStackNavigator();

NavigationContainer>
        <Stack.Navigator headerMode={false}>
          <Stack.Screen name="Insert Your data" component={Insert} />
          <Stack.Screen name="ViewData" component={ViewData} />
        </Stack.Navigator>
      </NavigationContainer>

插入.js

const Insert = ({ props, navigation: { navigate } }) => {
  const [enteredName, setEnteredName] = useState();
  const [enteredSurname, setEnteredSurname] = useState();

const sendValues = (enteredName, enteredSurname) => {
    setEnteredName(enteredName);
    setEnteredSurname(enteredSurname);
    navigate("ViewData", {
      name: enteredSurname,
      surname: enteredSurname
    });
  };

...

<View>
          <Button
            title="Submit"
            onPress={() => sendValues(enteredName, enteredSurname)}
          />

ViewData.js …

我正在用来react-navigation createBottomTabNavigator创建底部选项卡导航。标签栏在 iOS 上显示正常，但在 Android 上显示如下：

我不确定是什么导致了这种奇怪的造型。下面是我创建底部标签栏的代码：

    <Provider store={store}>
      <NavigationContainer theme={GlobalConfig.theme}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconSrc

              if (route.name === 'Alarms') {
                iconSrc = require('../img/ic_alarm.png')
              } else if (route.name === 'Settings') {
                iconSrc = require('../img/ic_settings.png')
              }

              return (
                <Image
                  source={iconSrc}
                  style={{
                    tintColor: focused
                      ? GlobalConfig.theme.colors.primary
                      : GlobalConfig.theme.colors.tabBarIconUnselected
                  }}
                />
              )
            }
          })}
          tabBarOptions={{
            activeTintColor: GlobalConfig.theme.colors.primary,
            inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected
          }}>
          <Tab.Screen name={I18n.t('alarms')} component={AlarmsTab} />
          <Tab.Screen name={I18n.t('settings')} component={SettingsTab} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>

每个选项卡都是一个堆栈导航器。警报堆栈导航配置如下：

    <Stack.Navigator
      initialRouteName="AlarmListScreen" …

我正在使用 React Navigation5。我有一个选项卡导航器，想清除单击选项卡上的选项卡历史记录。例如，我在选项卡 1 上，然后转到选项卡 2。从选项卡 2，我导航

屏幕1->屏幕2->屏幕3

现在如果我点击选项卡，它应该进入初始屏幕（screen1）。但它不起作用，它以错误的方式工作。这是我的代码。

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { CommonActions, StackActions } from '@react-navigation/native';


// Custom imports:
import StartScreen from '../screens/start/StartScreen';
import ProductsScreen from '../screens/products/ProductsScreen';
import AddCustomerScreen from '../screens/customers/AddCustomerScreen';
import CustomersScreen from '../screens/customers/CustomersScreen';
import WebviewScreen from '../screens/webview/WebviewScreen';

// Menu Screen
import MenuScreen from '../screens/menu/MenuScreen';
import CurrentAccountScreen from '../screens/menu/CurrentAccountScreen';
import AccountDetailScreen from '../screens/menu/AccountDetailScreen';
import AppInfoScreen from '../screens/menu/AppInfoScreen';
import MessagesScreen from '../screens/menu/MessagesScreen';

import { …

我试图将用户 ID 从登录屏幕传递到作为嵌套选项卡导航器一部分的主屏幕。这是我的应用程序的结构：

 const mainStack = () =>(

             <Tab.Navigator


             tabBarOptions={{
              activeTintColor: 'tomato',
              inactiveTintColor: 'gray',
            }}
             >
                <Tab.Screen name="Home" component={Homescreen} 
                 options = {{headerStyle: {backgroundColor: 'yellow'}}}
                />
                <Tab.Screen name="Profile" component={otherStack} />
             </Tab.Navigator>

    )




export default () => (

        <NavigationContainer >
              <Stack.Navigator screenOptions={{
                  headerShown: false
                  }}>
                <Stack.Screen name='Welcome' component={WelcomeScreen} />
                <Stack.Screen name = 'Register' component = {RegisterScreen} />
                <Stack.Screen name= 'Login' component={LoginScreen} />
                <Stack.Screen name = 'mainStack' component={mainStack} />
              </Stack.Navigator>



        </NavigationContainer>

)

每当我从登录屏幕转到主页并调用 this.props.navigation.getParam('id') 时，我都会收到一条错误消息，指出它不是一个函数。仔细检查后，我发现 this.props.navigation.state 是未定义的。可能意味着我的参数不会传递到主屏幕，即使我导航到它没有任何问题。

我尝试使用 NavigationActions 但我收到一个错误，我在其他任何地方都没有提到。

我像这样导航到主页：

this.props.navigation.navigate('Home' { …

在我的导航文件中，当我想切换抽屉时，出现以下错误：

类型错误：navigation.openDrawer 不是函数。（在 'navigation.openDrawer()' 中，'navigation.openDrawer' 未定义）

这是我的抽屉：

const DrawerNavigator = () => {
    return (
        <Drawer.Navigator
            initialRouteName="MYSHIFT"
        >
            <Drawer.Screen name="MYSHIFT" component={TopTabNavigator} />
        </Drawer.Navigator>
    )
}

这是我的容器导航：

const CareworkerNavigation = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>

                <Stack.Screen
                    name="Login"
                    component={LoginScreen}
                    options={{ headerShown: false }} />

                <Stack.Screen
                    name="Main"
                    options={({ navigation }) => {
                        return {
                            headerLeft: () => <Button title="LEFT BUTTON" onPress={() => {
                                navigation.toggleDrawer(); // <--- this line throws an error 
                            }} />
                        }
                    }}
                    component={DrawerNavigator} />

            </Stack.Navigator>
        </NavigationContainer>
    )
} …

我React Navigation 5在我的 React Native 应用程序中使用了 new 。

主菜单由RootNavigatora处理Drawer。登录/注册由AuthNavigationwhich处理Stack。

我试图在成功登录后将用户发送到Home屏幕RootNavigator。换句话说，我试图通过发出将用户发送到另一个导航器下的屏幕，navigation.navigate('RootNavigator', {screen: 'Home'});但我收到一个错误消息：

任何导航器都未处理负载为 {"name":"RootNavigator"} 的操作“NAVIGATE”。

你有一个名为“RootNavigator”的屏幕吗？

这是我的App.js样子：

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return …

我正在使用 React Navigation 版本 4，在设置我的导航和所有屏幕并运行代码后，我面临以下问题：

TypeError: (0, _reactNavigation.default) 不是函数。

我的 Routes.Js 是 -

import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';

const RootStack = createStackNavigator(
    {
        Drawer: { 
            screen: Drawer
        },
        LoginScreen: {
            screen: LoginScreen
        },
        LogoutScreen: {
            screen: LogoutScreen
        }
        InitialScreen: {
            screen: InitialScreen
        }
    },
    {
        initialRouteName: 'InitialScreen',
        headerMode: "none"
    }
)

const …

如何在 React-native 中为 Stacked Screes 添加过渡效果？

<NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Stocks" component={StocksScreen} />
    </Stack.Navigator>
</NavigationContainer>

是否有实现淡入/淡出效果的默认方法？

有没有比以下更好的多条路线导航方法？

   NavigatorService.navigate('Screen1', params);
   NavigatorService.navigate('Screen2', params);

其中Screen1和Screen2是同一堆栈导航器中的兄弟姐妹。